非常に基本的なHTMLフォーマット

私はここで私の髪を引っ張っています。私はただ2つの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

：あなたが参照を#innerleftと#innerright

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

するワードラッププロパティを追加しなければならないテキストをラップするためにブラウザを強制するには！ありがとう！私はできるだけ早く正しい印を付けます。 –

@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 .. –

ブラウザデフォルトでは、空白を持たないテキストはラップされません。私はそのことを聞いたことがなかったhttp://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

出典

2012-05-01 15:52:44

非常に基本的なHTMLフォーマット

答えて

関連する問題