ホームページ > ウェブフロントエンド > htmlチュートリアル > レイアウトの問題についてアドバイスをください_html/css_WEB-ITnose

レイアウトの問題についてアドバイスをください_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:43:57
オリジナル
965 人が閲覧しました

<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 には高さがなく、右側のコンテンツ (

など) に応じて自動的に高くなります。


ディスカッションへの返信(解決策)

おそらくこれでしょうか?そうでない場合は、ラフ レンダリングを送信してください

<!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>
ログイン後にコピー

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート