Web ページの真ん中の CSS 縦線_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Web ページの真ん中の CSS 縦線_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:06:45

オリジナル

1702 人が閲覧しました

(この画像の元のアドレスは次のとおりです: http://demo.dtcms.net/news/5.html)

お聞きしたいのですが、
真ん中の縦線はどのように書けばよいでしょうか? border-right:1px Solid; と書かれた左側の div に注目します。この場合、左側のコンテンツの高さが右側のコンテンツの高さよりも低くなると、垂直線は下に到達できなくなります。問題は提供されたページでも確認できますが、右側の div がメインの場合、この問題は依然として発生します

この問題を解決するにはどうすればよいですか?
HTMLはどのように書けばよいですか?

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

左右のコンテンツがどのように変化しても、2 つの部分の高さは常に同じままになるように、テキストコンテンツを追加してみることができます。左側または右側で効果を確認してください。
そうです

左右のコンテンツがどのように変化しても、2 つの部分の高さは常に同じままにすることができます。コンテンツを左側または右側に移動して効果を確認してください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.box{width:900px;margin:auto; border-top:solid 2px #ccc; border-right:solid 2px #ccc; overflow:hidden;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc;padding-bottom:2000px;margin-bottom:-2000px; background:#FF0;}.right{width:300px;padding-bottom:2000px;margin-bottom:-2000px; background:#FCF;}</style><title>无标题文档</title></head><body><div class="box cf">	<div class="left">    	在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常    </div>    <div class="right"></div></div></body></html>

ログイン後にコピー

この方法はpadding-bottom:2000pxに設定する必要がありますが、高さが2000を超える場合は問題が発生しますか？

スクリプト制御を通じて同様の効果を実現することもできます

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.box{width:900px;margin:auto; border-top:solid 2px #ccc; border-right:solid 2px #ccc; overflow:hidden;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc;padding-bottom:2000px;margin-bottom:-2000px; background:#FF0;}.right{width:300px;padding-bottom:2000px;margin-bottom:-2000px; background:#FCF;}</style><title>无标题文档</title></head><body><div class="box cf">	<div class="left">    	在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常    </div>    <div class="right"></div></div></body></html>

ログイン後にコピー