CSS 中的左右 Div

Question

我想要一个左 div 框和一个右 div 框。右侧 div 应为 300 像素宽并显示在左侧 div 旁边。

我对 CSS 感到很糟糕，尽管尝试了 5 个与此问题类似的其他堆栈溢出问题的解决方案，但我仍然无法弄清楚。

我试过显示：内联；我试过 tables/table 个细胞。我试过固定边距和自动边距我试过填充。搜索了最后一个小时，继续鼓捣

我真的对这种愚蠢的语言束手无策，需要帮助。

我的主页上有一个新闻提要，我只想在我的主要文章右侧有一个 300 像素的框来显示新闻。我已将其归结为最简单的组件来测试解决方案，none 似乎完全有效。

我的style.css:

#left {
    float: left;
    margin-right: 400px;
}
#right {
    float: right;
    width: 298px;
}

我的 HTML 文件：

<div id="right">
    Latest News
</div>
<div id="left">
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
</div>

Answer 1

HTML 分隔符使用 display: inline-block; 而不是 display: inline;.

HTML

<div id="right">
    Latest News
</div>
<div id="left">
    <p>My problem comes when this p tag gets too long. everything is ok   when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
</div>

CSS

#left {
    display: inline-block;
    margin-right: 400px;
}
#right {
    display: inline-block;
    float: right;
    width: 298px;
}

不需要float: left;。分隔符自然在页面左侧。

Answer 2

您可以简单地将 #left 块元素保持为常规流入内容，而不是浮动。

右边距将为右侧的新闻提要提供 space 根据需要增长。

#left {
  margin-right: 320px;
  border: 1px dotted gray;
}
#right {
  float: right;
  width: 298px;
  border: 1px dotted gray;
}

<div id="right">
  <h2>Latest News - Your news feed.</h2>
  <ul>
    <li>News topic ...</li>
    <li>News topic ...</li>
    <li>News topic ...</li>
    <li>News topic ...</li>
    <li>News topic ...</li>
    <li>News topic ...</li>
    <li>News topic ...</li>
    <li>News topic ...</li>
    <li>News topic ...</li>
  </ul>
</div>
<div id="left">
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
  <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p>
</div>

CSS 中的左右 Div

Left and right Divs in CSS

html

css

tags