html - 某些部分使用固定宽度的 div

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

我更新了你的 fiddle 。

这是 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;
}