clear a different div

2019-09-07 04:59发布

站内问答 / HTML/CSS
1068 3 4

I'm trying to align the layout so the images align in a row.

Here's a image of what it is currently doing

[screengrab](http://img812.imageshack.us/img812/3867/screengrabs.jpg)

HTML

<div class="p-alignleft"></div>
<div class="p-alignright"></div>

CSS

.p-alignleft { 
  float: left;
  margin-right:40px;
  width:450px;
  font-size: 1.2em;
  line-height: 1.4em;
}
.p-alignright {
  float: right;
  width:450px;
  font-size: 1.2em;
  line-height: 1.4em;
}

标签： css wordpress
举报
3条回答
成全新的幸福
2楼-- · 2019-09-07 05:18

If I understand rightly, you have a couple of options here. Instead of floating, my preference is to set each div to display: inline-block; That will make the divs line up next to each other, even if one is taller than the other:

div {
  display: inline-block;
  vertical-align: top;
}

A working example: http://cdpn.io/ojDEl

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.wrap {width: 800px;}
.wrap div {width: 48%; display: inline-block; vertical-align: top; background: #e7e7e7; margin-bottom: 20px;}

/* temp demo styles */
.wrap div {height: 200px;}
.wrap div.test {height: 300px;}

</style>

</head>
<body>
<div class="wrap">
    <div>Person A</div>
    <div class="test">Person B</div>
    <div>Person C</div>
    <div>Person D</div>
</div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
神经病院院长
3楼-- · 2019-09-07 05:19

By looking at the captured screen, I think you should enclose each person's part inside a div, and give them classes .p-alignleft or .p-alignright. After every two of them, make an empty <div class="clear"></div> with style .clear {clear:both}, so the next two persons will align at the same vertical level

HTML:

<div class="p-alignleft">Person A</div>
<div class="p-alignright">Person B</div>

<div class="clear"></div>

<div class="p-alignleft">Person C</div>
<div class="p-alignright">Person D</div>

CSS:

.p-alignleft {float:left}
.p-alignright {float:right}
.clear {clear:both}
查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
4楼-- · 2019-09-07 05:41
  • Use a container div as a row element <div class="row clearfix"><div class="media">...</div></div>
  • Float both elements to the left, and set clear: left on the odd ones.
  • Use a javascript solution to set the height to be the same. then you can leave the clear left, right, or clear all to one side.

something like this, you probably need to tweak it, it's more like pseudo code.:

var maxHeight = 0;
var items = $('.media');
// get the max height of the items
items.each(function() {
  var height = parseInt($(this).outerHeight().replace('px', ''), 10);
  if (maxHeight < height) {
    height = maxHeight;
  }
});
// assign the height to all the items
items.height(height + 'px');
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)