非常基本的HTML格式

我在這裏拉我的頭髮。我只是希望兩個並排的div包含內容，根據所有內容可見的內容調整div和它們包含div的內容，不滾動。非常基本的HTML格式

下面的標記是不是我的網站，但我寫它來證明我想要的東西：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 

<style> 

#outer{ 
    width:400px; 
} 

#innerleft{ 
    width:200px; 
    float:left; 
} 

#innerright{ 
    width:200px; 
    color:#900; 
    float:left; 
} 

</style> 

</head> 
<body> 

<div id="outer"> 
    <div id="innerleft"> 
     sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj 
    </div> 
    <div id="innerright"> 
     dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv 
    </div> 
</div> 


</body> 
</html>

我似乎已經用盡了一切！

來源

2012-05-01 Adam Waite

應用word-wrap：

#outer > div 
{ 
    word-wrap: break-word; 
}

http://jsfiddle.net/NEbj7/1/

來源

2012-05-01 15:26:24 Curt

我從來沒有聽說過！謝謝！我會盡快標出正確的。 –

@AdamWaite不用擔心:)我假設這是您正在使用的測試內容，然後考慮長度？在將來你可能會發現使用「[Lorem Ipsum]（http://www.lipsum.com/feed/html）」文本 – Curt

爲了讓自動調整要添加更多 - ％比例，使其自動填充的空間

#outer{ 
    width:100%; /* 100% */ 
} 

#innerleft{ 
    width:50%; /* 50% */ 
    float:left; 
    word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */ 
} 

#innerright{ 
    width:50%; /* 50% */ 
    color:#900; 
    float:left; 
    word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */ 
}

http://jsfiddle.net/eZpvr/1/

來源

2012-05-01 15:30:29

你已經提供了一個鏈接到我的jsfiddle？大聲笑 – Curt

Opss .. mybad .. –

瀏覽器默認情況下不會包裝沒有任何空白的文本。爲了強制瀏覽器自動換行，你必須添加自動換行屬性#innerleft和#innerright

#innerleft, #innerright{ 
word-wrap: break-word; 
}

參考：http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

來源

2012-05-01 15:52:44

非常基本的HTML格式

回答

相關問題