行の隣に2つの異なる幅のdivが表示されるようにするにはどうすればよいですか？

-1

ヘッダーがある電子メールレイアウトが必要です。本文には2つのdivがあり、1つはメインコンテナdivの2/3、もう1つは1/3になります全幅。行の隣に2つの異なる幅のdivが表示されるようにするにはどうすればよいですか？

また、私たちが古典的に見る水平ルールと同様に、垂直ルールを作るためのトリックがあるかどうかを知りたいと思います。

ここで私がしようとするように言われましたが、私はメインのコンテナのdivの内側お互いに次の二つのdivを得ていないのですコードです：

<html> 
<head> 
<meta charset="UTF-8"> 
<title>AUSA email</title> 
</head> 

<body style="font-family:sans-serif;" 
     #wrapper { 
    width: 500px; 
    border: 1px solid black; 
} 
#first { 
    width: 400px; 
    border: 1px solid red; 
} 
#second { 
    width: 200px; 
    border: 1px solid green; 
}></style> 
    <div id="wrapper"> 
    <div id="first">Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</div> 
    <div id="second">Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</div> 
</div> 
</body> 

</html>

出典

2017-12-06 Russ Nadasdy

確かにあなたを助ける誰かを見つける... – DaFois

OK、私は私が試していたコードを追加しました。 –

htmlのメールを作成する方法を勉強してください。あなたが持っているものは失敗するでしょう。なぜそれが失敗するのか理解するまで、私たちは本当にあなたを助けません。 – gwally

私はあなたがinline-ように表示を設定するには参照のうえだと思いますが、ブロック？ここで使用フレキシボックス

#wrapper { 
    width: 500px; 
    border: 1px solid black; 
} 

#first { 
    width: 300px; 
    border: 1px solid red; 
    display: inline-block; 
} 

#second { 
    width: 200px; 
    border: 1px solid green; 
    display: inline-block; 
}

出典

2017-12-06 19:46:12

はあなたが読むべきガイドです。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS

#wrapper { 
width: 500px; 
border: 1px solid black; 
display: flex; 
justify-content: center; 
} 
#first { 
width: 300px; 
border: 1px solid red; 
} 
#second { 
width: 200px; 
border: 1px solid green; 
}

HTML StackOverflowのは、その後、あなたがよ、あなたの質問にコードを投稿し、その後自分で試してみてくださいコードの書き込みサービスではありません

<html> 
<head> 
<meta charset="UTF-8"> 
<title>AUSA email</title> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first">Sample text.</div> 
<div id="second">Sample text.</div> 
</div> 
</body> 
</html>

出典

2017-12-06 21:52:06

行の隣に2つの異なる幅のdivが表示されるようにするにはどうすればよいですか？

答えて

関連する問題