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

我想将我的HTML页面分成两列等宽，这样每一半就像一个页面，其内容不会进入另一半。我为#left和float:right为#right做了float:left，但内容重叠到另一半。我怎样才能达到目标？将HTML页面分成两半，没有重叠

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

来源

2013-03-10 Mika H.

你给这些宽度？ – 2013-03-10 01:51:20

我明白了。所以我只是给两者都加了'50％'，现在看起来不错。唯一的一点是，当一个词很长时，它仍然会进入另一边。有什么办法解决这个问题？ – 2013-03-10 01:54:29

您应该将两列浮动到左侧。对于您在评论中报告的问题，请使用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%; 
}

来源

2013-03-10 02:08:55 FelipeAls

对我很好，谢谢！ – 2013-03-10 02:28:50

你的CSS必须被正确格式化这个工作：

内容
边界：0;
填充：0;
其中：100％;

left
border：0;
margin：0;
填充：0;
float：left;
宽度：50％;

right
border：0;
margin：0;
填充：0;
float：right;
宽度：50％;

任何侵入到填充，边距，不断线等...将使内容重叠...我认为填充是好的，因为它是在容器内......但你明白了。

来源

2013-03-10 01:55:17 MaxOvrdrv

它仍然不能解决我评论中的问题。 – 2013-03-10 02:03:25

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

回答

相关问题