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

キャプチャーした画面を見て、各人のパーツを で囲み、やdivをクラス分けした方がいいと思います。2 人ごとに styleを空けて、次の 2 人が同じ垂直レベルに整列するようにします。.p-alignleft.p-alignright<div class="clear"></div>.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 を表示するように設定することです。これにより、一方が他方よりも背が高い場合でも、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 に答える