html - 如何限制 Div 大小？

Question

我试图让我的 div 保持在左侧 70% 左右，但我的宽度太大了。 如果我执行 max-width: 500px，div 会转到中心。

在绿色中你可以看到 div 的大小

如何减小 div 的宽度并使 div 保持在该位置？我还想让“$user”位于图像的右侧。

CSS

.post {
width: 70%;
position:relative;
margin: 0 auto;    
}

HTML

<div class="post">                    
                 <h1><?php echo $title; ?></h1>                
                 <img src="data:image/gif;base64,<?php echo $image;?>" >
                 <div class="postRef" >
                     <button type="button" class="btn btn-link"><?php echo $likes;?> likes</button>
                     <button type="button" class="btn btn-link"><?php echo $comments; ?> comments</button>
                     <button type="button" class="btn btn-link"><?php echo $user; ?></button>
                 </div>
                 <div class="postBtns">
                     <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>
                 </div>
             </div>

Answer 1

margin: auto 自动将剩余空间的一半分配给左右边距，从而使其居中。如果您想要屏幕左侧的 div，只需删除给它的边距即可。

编辑

阅读评论后，您似乎想要的是一个 2 列类型的系统。为了按照您希望的方式放置帖子，您应该使用全局容器，然后放置它并让帖子占用该空间的一小部分:

.container{
  margin: 0 auto;
  width: 80%;
  max-width: 800px;
}
.post-container{
  float:left;
  width: 70%;
}
.other-container{
  width: 29%;
  float: right;
  background: pink;
}
.post {
  display: inline-block;
width: 100%;
background: lightblue;
}

HTML:

<div class="container">
<div class="post-container">

  <div class="post">                    
                 <h1>GIF</h1>                
                 <img src="" >
                 <div class="postRef" >
                     <button type="button" class="btn btn-link">4 likes</button>
                     <button type="button" class="btn btn-link">5 comments</button>
                     <button type="button" class="btn btn-link">User</button>
                 </div>
                 <div class="postBtns">
                     <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>
                 </div>
             </div>
  <div class="post">                    
                 <h1>GIF</h1>                
                 <img src="" >
                 <div class="postRef" >
                     <button type="button" class="btn btn-link">4 likes</button>
                     <button type="button" class="btn btn-link">5 comments</button>
                     <button type="button" class="btn btn-link">User</button>
                 </div>
                 <div class="postBtns">
                     <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>
                 </div>
             </div>
</div>

<div class="other-container">
Other stuff!!!!<br><br><br><br><br><br><br><br><br><br><br><br>and others.
</div>
</div>
             </div>

https://jsfiddle.net/1g57b5o3/2/