私はこれを達成したい：第2の幅が100％の場合、2つのdivを並べて配置する方法はありますか？
width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |
|-----------------------------------|
は、それはすべての残りのスペースを有する第2のdivを残してサイド・バイ・サイド2つのdivを配置することは可能ですか？
最初のdivを浮動させ、最初のdivの幅に合わせて2番目のdivの余白を設定します。このような何か：
div.one {
width: 60px;
float: left;
}
div.two {
margin-left: 60px;
}
margin、border、あなたがwidthの合計になるようにmargin-leftを設定する必要があるので、divの上width CSSプロパティはコンテンツのみに適用されることに注意してください、とpaddingプロパティ最初のdivの
Hereは、jsfiddleの最新バージョンです。あなたはそれについて何か質問があれば教えてください。ここで
は、それが行われます方法です。
.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}
.content {
background:blue;
color:white;
margin-left:60px;
}
'.content'から' width：100％; 'を削除する必要があります。そうしないと、すべてのコンテンツの幅の合計がビューポートより大きくなるため、水平スクロールバーが表示されます。 – AgentConundrum
はい、あなたは正しいです！..固定 –
絶対ポジションを使用するときは、IE7の親divの位置をrelativeに設定する必要があります。 – Fatih
ここでは、次のとおりです。
CSS：
#container { background: silver; width: 100% }
.image
{
background: green; color: green;
width: 60px; height: 60px;
float: left;
}
.content
{
background: blue; color: white;
margin-left: 60px;
}
とjsFiddleに（これは、現時点ではアップ遊んでいます）
これが役立つことを願っています！
これを試してみてください：
<html>
<head>
<title>Tabla de contenidos - Template</title>
<style type="text/css">
div {
border: 1px solid #000000;
}
#divleft{
width: 60px;
float: left;
}
#divright{
display: block;
margin-left: 62px;
}
</style>
</head>
<body>
<div id="divleft">This DIV has a width of 60px.</div>
<div id="divright" >This DIV occupies the rest of the page...</div>
</body>
</html>
62pxのマージンは、各境界線の1つの余分なピクセルオーバーラップを回避することです。
別のオプションは、この作業提案は最近Firefoxの、クロム、およびSafariでサポートされていflexible box model
を使用することです。
要素聖霊降臨祭CSS3を手配するための新しい方法があるflexie.js.
使用してサポートされていないブラウザに移植することができ ここにチェックこのページFlexbox Froggy、あなたはCSSコードを書くことでカエルや友人を助けるゲーム！
ガイドこのカエルのアイテムの左側に揃えますコンテナ
私は 'display：inline-block'を使っていました。私はこれがうんざりしていたと思います。これはうまくいく、ありがとう。 – BrunoLM
これはうまくいきません –
これらの2つのdivには注意して、パディングや境界線を追加しないでください。コンテナを入れなければならない場合。 – Nux