我如何限制Div大小？

Question

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

以绿色显示div的大小

如何减小div的宽度并将div保持在该位置？ 我也想制作＆＃34; $ user＆＃34;走右图片。

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/