Question

我想使用修复宽度实现如下布局。宽度应该是600px然后我想在主div中有一些部分。我希望主div在页面的中心对齐。

我是一个CSS初学者，我没有达到这个结果，我有一个小问题：fiddle

它没有在页面的中心对齐，也只有div .post-title正确显示。

您知道实现图像布局的必要条件吗？

<div class="wrapper">
    
      <div class="post-title">
        title
      </div>
    
      <div class="post-info">
    
        <div class="post-date">
          date
        </div>
        <div class="post-admin">
          admin
        </div>
      </div>
    
      <div class="post-category">
        category
      </div>
      
      <div class="post-tags">
      tags
      </div>
    </div>

Answer 1

我更新了你的小提琴。

这是CSS，以防它无法正常工作。使用flexbox。

.wrapper{
  width: 600px;
  display:block;
  margin: auto;
  border:1px solid gray;
  text-align:center;
}

.post-title{
  border-bottom: 1px solid gray;
  padding:20px;
  text-align:left;
}

.post-info{
  width:100%;
  display: flex;
  height: 100px;
}

.post-date{
  border-right:1px solid gray;
  padding: 20px;
  flex: 1;
  box-sizing:border-box;
  text-align: left;
}

.post-admin{
  padding:20px;
  box-sizing:border-box;
  text-align: left;
  flex: 1;
}

.post-category{
  border-top:1px solid gray;
  text-align: left;
  padding:10px;
}

.post-tags{
  border-top:1px solid gray;
  text-align: left;
  padding:10px;
}

Answer 2

您不需要浮动所有内容，实际上它使得处理框下的元素变得非常困难，因为浮动文件会从文档流中被撕掉。父容器也不再识别元素的大小。您可以使用flexbox代替彼此相邻的两个元素，但为了获得更好的兼容性，您还可以将它们inline-block。{/ p>

我会用width: 100%;（或至少大于600px的东西）将所有内容包装在另一个块（可能只是身体，如果适用于你）中，然后使用margin: 0 auto;（0顶部和底部，自动左右）。我使用inline-block作为日期和管理块。也不是说你必须删除它们之间的空格（我使用了html注释），所以它们不会中断。

body {
  width: 100%;
}

.wrapper{
  width: 600px;
  display:block;
  border:1px solid gray;
  text-align:center;
  margin: 0 auto;
}

.post-title{
  border-bottom: 1px solid gray;
  padding:20px;
  text-align:center;
}

.post-info{
  width:100%;
}

.post-date{
  border-right:1px solid gray;
  padding: 20px;
  width:50%;
  box-sizing:border-box;
  display: inline-block;
}

.post-admin{
  padding:20px;
  width:50%;
  box-sizing:border-box;
  display: inline-block;
}

.post-category{
  padding:10px;
  box-sizing:border-box;
  border-top: 1px solid grey;
}

.post-tags{
  padding:10px;
  box-sizing:border-box;
  border-top: 1px solid grey;
}

<body>
  <div class="wrapper">

    <div class="post-title">
      title
    </div>

    <div class="post-info">

      <div class="post-date">
        date
      </div><!--
   --><div class="post-admin">
        admin
      </div>
    </div>

    <div class="post-category">
      category
    </div>

    <div class="post-tags">
    tags
    </div>
  </div>
</body>

div使用固定宽度

2 个答案: