ホームページ > ウェブフロントエンド > htmlチュートリアル > div 内のコンテンツが外部に出ています_html/css_WEB-ITnose

div 内のコンテンツが外部に出ています_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 08:48:47
オリジナル
2970 人が閲覧しました

<script type="text/javascript">	$(document).ready(function() {		$(".flip").click(function() {			$(".panel").slideToggle("slow");		});		$(".flip2").click(function() {			$(".panel2").slideToggle("slow");		});	});</script><style type="text/css">div.panel, div.flip, div.panel2, div.flip2 {	margin: 0px;	padding: 5px;	text-align: center;	background: #e5eecc;	border: solid 1px #c3c3c3;}div.panel {	display: none;}div.panel2 {	display: none;}ul li {	list-style-type: none;}</style><body>	<ul>		<li>			<div				style="width: 10%; height: 20px; float: left; text-align: right; overflow: hidden;">例子1</div>			<div class="flip" style="width: 88%; height: 20px; float: right;">请点击这里</div>			<div class="panel" style="width: 88%; float: right;">				<p>W3School - 领先的 Web 技术教程站点</p>				<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>			</div>		</li>		<li>			<div				style="width: 10%; float: left; text-align: right; overflow: hidden;">例子2</div>			<div class="flip2" style="width: 88%; float: right;">请点击这里</div>			<div class="panel2" style="width: 88%; float: right;">				<p>W3School - 领先的 Web 技术教程站点</p>				<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>			</div>		</li>	</ul></body>
ログイン後にコピー

クリックして下にスライドしたい、この機能が実装されています。最初に「クリックしてください」をクリックしたdivが長くなってしまったのですが、divは固定されていましたが、中の文字がはみ出してしまいました。例 1 と例 2 の 2 つの div も同様です。どうすれば解決できますか? >ディスカッション (解決策) に返信

単語がわからず外に逃げてしまいました

試してみてください

ul li {

list-style-type: none; clear: Both;

言葉がわからず、外に逃げましたか? 列 1 をクリックするか、数回クリックすると見つかります

試してみましょう

ul li {

list-style-type: none;clear: Both;

いいえ


単語が見えず外に逃げました ああ

Liezi 1 をクリックするか、さらに数回クリックすると見つかります

写真を送って見てみましょう


こんなのが欲しいです
でもそうなります このようになります


単語が見えず外に逃げました Liezi 1 をクリックするか、さらに数回クリックすると完了します 見つけました
投稿する写真を見て見ます

6 階にあります



見ませんでした知らせが来ました、外へ逃げてください
列 1 をクリックするか、さらに数回クリックすると見つかります

写真を送ってください、見てみましょう
6 階にあります 試してみます。多くのブラウザを試しましたが、問題は表示されません。どのブラウザを使用していますか? > 単語が見つからず、外に逃げました

列 1 をクリックするか、さらに数回クリックしてください。きっと見つかります

写真を送ってください、見てみましょう
6階にあります


多くのブラウザを試しましたが、どれも問題が発生しませんでした。使用しているブラウザは?


Firefox

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