Question

我想在that example中创建一个双列网页。每列都包含对其旁边照片的一些描述 - 您知道如何使用css来实现这一目标吗？

Answer 1

.col-half {
  width: 40%;
  float: left;
  padding:15px;
}

.col-half div {
  background-color:orange;
  color:white;
  margin:5px;
  border:1px solid black;
  background-image:url('http://img1.wikia.nocookie.net/__cb20100915194254/starwars/images/7/7f/Jabba_SWSB.png');
  background-size:cover;
  min-height:150px;
}

<div class='col-half'>
  <div>asdf</div>
  <div>zyzzz</div>
  <div>asdf</div>
  <div>12345</div>
</div>
<div class='col-half'>
  <div>asdf</div>
  <div>zyzzz</div>
  <div>asdf</div>
  <div>12345</div>
</div>

注意宽度为40％，这是为边距/填充留出空间。您可以根据需要进行调整。

Answer 2

您可以使用{float：left;}或{display：inline-element;}，{width：49％}左右。

这是jsfiddle。

.half-column {
width: 49%; 
display: inline-block; 
vertical-align: top; 
margin-bottom:10px; 
margin-right:0.5%;}

如果您决定像其他人提到的那样使用花车，请记住在空div或下一个元素上添加{clear：both;}。例如：

1）<div style="clear: both;"></div>紧随你的浮动元素之后。或

2）将选择器添加到：last-child，

.half-column:last-child:after {content:'.'; clear: both; visibility: hidden;}

Answer 3

#left{
  float: left;
  width: 50%;
  overflow: hidden;
  padding:15px;
  text-align:left;
}

#right{
  float: right;
  width:50%;
  overflow: hidden;
  padding:15px;
  text-align:left;
}

您还可以使用bootstrap等框架进行列布局。只需包含文件

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

然后您可以根据grid system设置列，如此...

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

如何使用CSS创建两个列页面布局？

3 个答案: