Question

我想为Imageboard设置页面布局。我是CSS的新手，尝试了不同的解决方案，但这些解决方案都无法按我的意愿工作。应该有一个帖子，图片漂浮在左边，文字环绕它。听起来很简单，但我做不到。

我尝试将容器设为“ post”，其中将按顺序排列3个子容器：postHeader（应位于顶部），pic（带有图片）和text（带有文本post）。我试图设置图片和文本显示：inline-block;为了使它们在一行中对齐，但没有带有属性witdh的文本，则在另一条下面绘制一个。我尝试在图片上设置set float：left，使图片向左浮动并在其周围进行自动换行，但是如果文本太少，则无法调整容器大小。我不想使用尺寸，这会破坏响应能力。

我尝试过的

css：

.post {
    min-height: 100px;
}
.pic {
    position: relative;
    float: left;
    display:inline-block;
}
.text {
    display:inline-block;
}

html：

<div class="thread">
        <div class="post op">
            <div class="postHeader">Post header</div>    
            <div class="pic">
                <div  class="picName">
                    <a class="picLink" href="content/cat_and_banana.jpg">cat_and_banana.jpg</a>
                </div>
                <img class="picThumbnail" src="content/thumbnail/123.jpg">
            </div>   
            <div class="text">Some text</div>             
        </div>
    </div>

How it should look

Answer 1

这里有一个我制作的快速样本，希望它能满足您的需求

.container{
  width: 100%;
  height: 400px;
  background-color: blue;
  padding-top: 10px;
  overflow: auto;
}
.header{
  width: 100%;
  height: 50px;
  background-color: orange;
  text-align: center;
}
.bodycontainer{
 background-color: green;
 width: 100%;
 height: 100%;
}
.piccontainer{
  background-color: yellow;
  float: left;
  height: 100%;
  overflow: hidden;
}
img{
 height: 180px;
 width: 200px;
 margin: 10px; 
}

<div class="container">
  <div class="header"><h2>HEADER</h2></div>
  
  <div class="bodycontainer">
  <div class="piccontainer">
  <img align="left" src="https://cms-assets.tutsplus.com/uploads/users/48/posts/27341/preview_image/html-basics-3.png"/>
  <img align="left" src="https://cms-assets.tutsplus.com/uploads/users/48/posts/27341/preview_image/html-basics-3.png"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
  </div>
  </div>
  
</div>

将html + css放置为帖子

1 个答案: