Question

我想将我的HTML页面分成两列宽度相等的列，这样每一半就像一个页面一样，它的内容不会进入另一半。我为float:left #left和float:right #right做了<div id="content"> <div id="left"></div> <div id="right"></div> </div>，但内容与另一半重叠。我怎样才能实现目标？

{{1}}

Answer 1

您应该向左浮动两列。对于您在评论中报告的问题，请使用word-wrap: break-word;但也不要使用长度为90个字符的假字，除了一些威尔士村以外，任何人类语言都不存在。芬兰语和德语有很长的话，但仍然。请改用lorem ipsum。网址仍然很长。

以下是演示：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%;
}

Answer 2

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

内容
边界：0;
填充：0;
用：100％;

左
边界：0;
余量：0;
填充：0;
浮动：左;
宽度：50％;

右
边界：0;
余量：0;
填充：0;
浮：右;
宽度：50％;

任何对填充，边距，非破坏字符串等的入侵......都会使内容重叠...我认为填充是正常的，因为它在容器内...但你明白了。

将HTML页面分成两半，没有重叠

2 个答案: