我试图让我的 div 保持在左侧 70% 左右,但我的宽度太大了。 如果我执行 max-width: 500px
,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>
最佳答案
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>
关于html - 如何限制 Div 大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45377082/