图像板CSS的盒子模型(Box model for a Image board CSS)

 你好我和女孩我过去几周一直在使用Image board作为一个学习项目，并且遇到了一些关于CSS样式的问题，主要是我应该如何设计Post及其内容。 我想要构建的东西看起来像这样。 
 
  
 
 现在，我这样做的方法是让一个div持有一个img，另一个div使用post_content和一个标题。 并将其设置为Display：flex，row 
 
 这样做的一个问题是post / header div会增加容器post div并使文本在屏幕上运行。 我尝试通过给帖子和img固定大小20％/ 80％来解决这个问题。 这很有效，直到我调整页面大小，img和div之间的差距随着我的页面大小而变大。 
 
 这里有一个示例帖子，任何帮助都会很棒，而且总是不好回答任何问题。 
 
 
 
 
 
  
#flex_content {
  display: flex;
}
#flex_post {
  width: 80%;
}
#post_header {
  margin-bottom: 4px;
}
#thumbnail {
  width: 10em;
  height: auto;
}
#post {
  background-color: #333 !important;
  float: left;
  width: 100%;
}
#post {
  height: auto;
  width: 100%;
  border: 2px solid #F4E8AF;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  word-wrap: break-word;
}
#img {
  width: 20%
}
#post_contnet{
    width:80%;
}
 
  
<div id='post'>
  <div id="header">
    <a href="images/1455249371 ">1455249371.png </a>
    <br />
  </div>
  <div id="flex_content">
    <div id="img">
      <img id='thumbnail' src="images/1455249371 ">
    </div>
    <div id='flex_post'>
      <div id="reply_header">
        <b>Anonymous</b> 10:56
        <ahref='chan.php?post=83'>>>No.83</a>
          [<a href='thread.php?thread=67'>Reply</a>]
          <br />
      </div>
      <div id='post_contnet'>
        [Transparent]
        <br />
      </div>
    </div>
  </div>
</div>
 
 
 
 

Hello guys and girls I Have been working on a Image board as a learning project for the past few week and have run into a bit of a snag with CSS styling mostly in how I should style the Post and it content. What I'm wanting to build would look something like this.
 
 
For now the way I'm doing this is by having a div hold a img and another div with the post_content and a header inside of that. and setting it to Display:flex,row 
 
A problem with this would be that the post/header div would out grow the container post div and would make text run off screen. I tried fixing this by giving the post and the img a fixed size 20%/80%. this worked well till i resize the page and the gap between the img and the div grew larger as i size up the page.
 
here is a sample post any help would be awesome and as always ill be around to answer any questions. 
 
 
 
 
 
  
#flex_content {
  display: flex;
}
#flex_post {
  width: 80%;
}
#post_header {
  margin-bottom: 4px;
}
#thumbnail {
  width: 10em;
  height: auto;
}
#post {
  background-color: #333 !important;
  float: left;
  width: 100%;
}
#post {
  height: auto;
  width: 100%;
  border: 2px solid #F4E8AF;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  word-wrap: break-word;
}
#img {
  width: 20%
}
#post_contnet{
    width:80%;
}
 
  
<div id='post'>
  <div id="header">
    <a href="images/1455249371 ">1455249371.png </a>
    <br />
  </div>
  <div id="flex_content">
    <div id="img">
      <img id='thumbnail' src="images/1455249371 ">
    </div>
    <div id='flex_post'>
      <div id="reply_header">
        <b>Anonymous</b> 10:56
        <ahref='chan.php?post=83'>>>No.83</a>
          [<a href='thread.php?thread=67'>Reply</a>]
          <br />
      </div>
      <div id='post_contnet'>
        [Transparent]
        <br />
      </div>
    </div>
  </div>
</div>
 
 
 
 

原文：https://stackoverflow.com/questions/35447000