ホームページ >ウェブフロントエンド >htmlチュートリアル >レイアウトの問題についてアドバイスをください_html/css_WEB-ITnose
レイアウトの問題についてアドバイスをください_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:57956ブラウズ
<div style="background: #008b8b; float: left;"> <div style="width: 200px; float: left; background: #CCC; text-align: center;"> <img style="width: 90%;position: absolute; top: 50%;" src="15.jpg" /> </div> <div style="width: 200px; float: left; background: #00bfff; left: 200px;"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p><p>p</p><p>p</p><p>p</p><p>p</p> </div> </div>
上記のコードは、内部の画像が常に真っ直ぐで中央にあることを望んでいますが、DIV には高さがなく、右側のコンテンツ (e388a4556c0f65e1904146cc1a846bee など) に応じて自動的に高くなります。
ディスカッションへの返信（解決策）
おそらくこれでしょうか？そうでない場合は、ラフ レンダリングを送信してください
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>图片测试</title></head> <body> <div style="background: red;float: left;"> <div style="width: 500px;float: right; background: #00bfff; left: 200px;"> <div style="float: left;margin: 50% 0;"> <img style="width:50px;height:50px;" src="http://static.cnbetacdn.com/thumb/article/2015/0522/7123851075baf53.png_600x600.png" /> </div> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p><p>p</p><p>p</p><p>p</p><p>p</p> </div> </div> </body></html>
<style type="text/css">*{margin:0;padding:0;}div.img{width:200px;position:absolute;left:0;top:0;height:100%;background:#ccc;text-align:center;}div.img:after{content:'';display:inline-block;height:100%;width:0;font-size:0;vertical-align:middle;}div.img img{width:90%;vertical-align:middle;}</style><div style="background:#008b8b;position:relative;"> <div class="img"> <img src="http://static.cnbetacdn.com/thumb/article/2015/0522/7123851075baf53.png_600x600.png" /> </div> <div style="width:200px;background:#00bfff;margin-left:200px;"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> </div></div> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。