將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頁面分成兩半，沒有重疊

回答

相關問題