Question

我想要一个左div框和一个右div框。右边的div宽是300px，显示在左边的div旁边。

我对CSS很糟糕，尽管从其他5个堆栈溢出问题尝试解决方案，但是我仍然无法解决这个问题。

我试过显示：内联; 我试过表/表格单元格。我尝试过固定和自动边距我试过填充。我搜索了最后一小时并继续修补。

我真的以这种愚蠢的语言结束我的智慧并需要帮助。

我的主页上有一则新闻提要，我只想在我的主文右侧显示一个300px的框来显示新闻。我把它归结为最简单的可能组件来测试解决方案，但它们似乎都没有用。

我的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

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

右边距将为新闻提供空间，根据需要增加权利。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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;。分隔符自然位于页面左侧。

CSS中的左右Div

2 个答案: