对齐列和照片

时间：2016-08-12 16:10:55

标签： html css

我不记得如何像照片中那样对齐2列

How can I make 2 columns like this?

我已经尝试过使用柱形容器，但我可以正确对齐2列。

<div id="wrapper">
<div id="column_container">
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
</div>
</div>

4 个答案:

答案 0 :(得分：1)

方法1：使用inline-block

要制作两个居中的列，您应该使用display: inline-block作为列，而父div应该使用text-align: center。当使用inline-block时，父母正在“考虑”他们一个简单的'文本'。

#container {
  width: 100%; /* OR 100% */
  text-align: center;
}
.column {
  width: 150px;
  display: inline-block;
  margin: 20px;
  background: #fafafa;
  padding: 10px;
  vertical-align: top;
}
<div id="container">
  <div class="column">
   <b>Title 1</b>
   <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
  <div class="column">
   <b>Title 2</b>
    <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
</div>

方法2：使用table

您还可以创建一个包含两列的表格，并使表格以margin: 0 auto 0为中心，相对于容器的宽度。

#container table {
  width: 300px;
  margin: 0 auto 0;
}
#container table td {
  background: #FAFAFA;
  text-align: center;
}
<div id="container">
  <table>
  <tr>
    <td><b>Title 1</b>
        <br/><br/>
       <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
    </td>
    <td><b>Title 2</b>
        <br/><br/>
       <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
    </td>
  </tr>
  </table>
</div>

方法2：使用css table

您还可以创建一个包含两列的表格，display: table-cell列为行，display: table-row为行，display: table为整个表格，并将表格置于margin: 0 auto 0的中心位置

#container {
  display: table;
  margin: 0 auto 0;
}
#row {
  display: table-row;
}
.column {
  width: 150px;
  display: table-cell;
  margin: 20px;
  background: #fafafa;
  padding: 10px;
  vertical-align: top;
  text-align: center;
}
<div id="container">
  <div id="row">
  <div class="column">
   <b>Title 1</b>
   <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
  <div class="column">
   <b>Title 2</b>
    <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
  </div>
</div>

答案 1 :(得分：0)

在CSS中实现两列有多种可能性。以下是使用float：

的示例

＆＃13;
＆＃13; 
.column_container {
  width: 400px;
  margin: 0 auto;
}
.column {
  width: 50%;
  text-align: center;
  border: 1px solid;
  box-sizing: border-box;
}
.colleft {
  float: left;
  color: #55a;
}
.colright {
  float: right;
  color: #a55;
}
＆＃13; 
<div id="wrapper">
  <div id="column_container">
    <div class="column colleft">
      <h2>header text</h2>
      <p>paragraph text</p>
    </div>
    <div class="column colright">
      <h2>header text</h2>
      <p>paragraph text</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

只需将column-count:2;放入#column_container的CSS column-break-after: always;和.column的CSS中。请参阅此小提琴以获取完整示例：https://jsfiddle.net/af7xdwx6/

答案 3 :(得分：0)

您可以添加css规则以使列类显示为“inline-block”

    <html>
<head>
    <title>TODO supply a title</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        .column{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="column_container">
            <div class="column">
                <h2>header text</h2>
                <p>paragraph text</p>
            </div>
            <div class="column">
                <h2>header text</h2>
                <p>paragraph text</p>
            </div>
        </div>
    </div>
</body>

您必须使用其他规则使其看起来更漂亮或者随后修改它，但它现在会显示在列中。

相关问题
最新问题