图片板的盒子模型 CSS

Question

大家好，过去几周我一直在做一个图像板作为学习项目，并且运行在 CSS 样式方面遇到了一些障碍，主要是我如何应该设置 Post 的样式及其内容。我想要构建的内容看起来像这样。

现在我这样做的方法是让 div 持有一个 img 和另一个 div 与 post_content 和 header 在里面.并将其设置为 Display:flex，行

一个问题是 post/header div 会超出容器 post div 并使文本运行离开屏幕。我尝试通过给 post 和 img 一个固定大小 20%/80% 来解决这个问题。在我调整页面大小时，img 和 div 之间的差距随着我调整页面大小时变得越来越大。

这里是一个示例 post 任何帮助都将是非常棒的，而且我总是会回答任何问题。

#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>

Answer 1

请试试这个：

#thumbnail {
  width: 10em;
  height: auto;
  float:left;
  margin-right:10px;
}

<div id='post'>
  <div id="flex_content">
    <div id="img">
        <img id='thumbnail' src="1455249371.png">
        <div id="header">
          <a href="images/1455249371 ">1455249371.png </a>
        </div>
        <b>Anonymous</b> 10:56
        <a href='chan.php?post=83'>>>No.83</a>
        [<a href='thread.php?thread=67'>Reply</a>]
        <br />
        <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>
        
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
       
    </div>
  </div>
</div>

Answer 2

我想我在清理我的代码时修复了这个问题，我所做的只是从 img 标签中删除 width:20% 并且 boom bam boom 它起作用了

图片板的盒子模型 CSS

Box model for a Image board CSS

html

css

frontend