3

我想将我的 HTML 页面分成等宽的两列，这样每一半就像一个页面，它的内容不会进入另一半。我做float:left了 for#left和float:rightfor #right，但内容与另一半重叠。我怎样才能实现目标？

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>
4

2 回答 2

6

您应该将两列都浮动到左侧。对于您在评论中报告的问题，请使用word-wrap: break-word;但也不要使用 90 个字符长的假词，除了一些威尔士村庄外，任何人类语言都不存在这种假词。芬兰语和德语的单词很长，但仍然如此。改为使用lorem ipsum。URL 仍然可以很长。

这是一个演示：http: //jsfiddle.net/xZJyE/

HTML：

<div id="content">
  <div class="left w50">LEFT</div>
  <div class="left w50">lorem ipsum</div>
</div>

CSS：

html {
    font-size: 62.5%;
}
body {
    background-color: white;
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.4em; /* equiv 14px */
    line-height: 1.5; /* adapt to your design */
}
/* you shall not pass */
div, textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
}
.left {
    float: left;
}
.w50 {
    width: 50%;
}
于 2013-03-10T02:08:55.387 回答
1

您的 css 必须正确格式化才能正常工作：

内容
边框：0；
填充：0；
有：100%；

左
边框：0；
边距：0；
填充：0；
向左飘浮;
宽度：50%；

右边
框：0；
边距：0；
填充：0；
浮动：对；
宽度：50%；

对填充、边距、不间断字符串等的任何入侵都会使内容重叠......我认为填充是可以的，因为它在容器内......但你明白了。

于 2013-03-10T01:55:17.720 回答