添加并排 div 混乱

发布于 2024-11-18 22:23:11 字数 655 浏览 3 评论 0原文

我似乎总是把这个简单的 HTML 内容弄错。我目前正在尝试在我制作的这个测试页面的页面中间添加并排的 div：

我添加的代码是这样的：

<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>

我添加了 标签，以便您可以更好地在页面上找到它。

但是您是否看到那里出现了类似“考虑任何伤害风险时”的文本 - 但该文本位于下面的

标签中。为什么会出现在那里？

将我试图对齐的 2 个 div 包裹在另一个 div 中是否是更好的做法？

原文

I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:

http://www.comehike.com/hiking_dev.php

The code I added was something like this:

<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>

I added <strong> tags so you can spot it on the page better.

But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?

Is it better practice to wrap my 2 divs that I am trying to align, within another div?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安稳善良 2024-11-25 22:23:11

在两个浮动 div 之后，添加另一个空 div...

<div style="clear:both;"></div>

这将导致两个浮动 div 将所有后续内容推送到它们下方。正如您现在所看到的，第一个 div 之后有 200 像素的空白空间，允许其他内容简单地环绕它。

增加浮动 div 的宽度可能不适合您的布局，因此 clear:both; 对于这种情况最为典型。

After your two floating divs, add another empty div...

<div style="clear:both;"></div>

This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.

Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.

回复收藏 0 原文

三生路 2024-11-25 22:23:11

将这两个 div 包围在父 div 中，并将溢出设置为隐藏。

<div style="overflow:hidden;">
  <div style="width: 460px; float: left; ">
    <strong>Test hello</strong>
  </div>
  <div style="width: 300px; float: right; ">
    <strong>Test hello 2</strong>
  </div>
</div>

另一种选择（正如其他人指出的那样）是使用第三个元素：

<div style="clear:both;"></div>

关于哪个更好是有争议的。通常，两者都可以。这是关于该主题的帖子：
浮动子元素：overflow:hidden还是clear:both？

Surround those two divs in a parent div with overflow set to hidden.

<div style="overflow:hidden;">
  <div style="width: 460px; float: left; ">
    <strong>Test hello</strong>
  </div>
  <div style="width: 300px; float: right; ">
    <strong>Test hello 2</strong>
  </div>
</div>

An alternative (as others have pointed out) is to use a third element:

<div style="clear:both;"></div>

It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?

回复收藏 0 原文