0

我正在尝试对齐布局，以便图像连续对齐。

这是它目前正在做的事情的图片

[截屏](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;
}
4

3 回答 3

1

通过查看捕获的屏幕，我认为您应该将每个人的部分包含在 adiv中，并为他们提供类.p-alignleft或.p-alignright. 在每两个人之后，<div class="clear"></div>用 style做一个空.clear {clear:both}，这样接下来的两个人将在同一垂直水平线上对齐

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}
于 2013-05-28T04:40:40.037 回答
0
  • 使用容器 div 作为行元素<div class="row clearfix"><div class="media">...</div></div>
  • 将两个元素都向左浮动，并设置clear: left在奇数上。
  • 使用 javascript 解决方案将高度设置为相同。然后您可以将清除左侧、右侧或全部清除到一侧。

像这样的东西，你可能需要调整它，它更像是伪代码。：

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');
于 2013-05-28T04:44:07.927 回答
0

如果我理解正确，你有几个选择。而不是浮动，我的偏好是将每个 div 设置为显示：inline-block; 这将使 div 彼此相邻排列，即使一个比另一个高：

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

一个工作示例：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>
于 2013-05-28T04:44:54.643 回答