隙間なく複数DLするにはどうすればいいですか？ _html/css

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

隙間なく複数DLするにはどうすればいいですか？ _html/css_WEB-ITnose

Jun 24, 2016 pm 12:17 PM

この投稿は dmtnewtons によって最終編集されました: 2012-12-17 14:18:31

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;dl_float&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;*{	padding:0;	margin:0;	}div{	border:solid 1px;	padding:10px;	float:left;	width:900px;	margin-top:10px;	margin-left:auto;	margin-right:auto;	position:relative;	}div dl{	display:block;	width:400px;	border:solid 1px;	float:left;	margin:2px;	position:inherit;	}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;	&lt;dl&gt;def&lt;br /&gt;ghi&lt;/dl&gt;	&lt;dl&gt;456&lt;/dl&gt;	&lt;dl&gt;123&lt;br /&gt;abc&lt;/dl&gt;	&lt;dl&gt;789&lt;/dl&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

効果:

欲しい効果:

DL はプログラムによってループアウトされているため、変更できません特定の個人の場合、次の DL が前の DL のギャップを埋めることをどのように認識しますか?

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

margin:2px; もちろん、これを 0 に設定すると消えます

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;dl_float&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;*{    padding:0;    margin:0;    }div{    border:solid 1px;    padding:10px;    float:left;    width:900px;    margin-top:10px;    margin-left:auto;    margin-right:auto;    position:relative;    }dl{    display:block;    width:400px;    border:solid 1px;    float:left;    margin:2px;    position:inherit;    }&lt;/style&gt;&lt;/head&gt; &lt;body&gt;&lt;div&gt;    &lt;dl&gt;def&lt;br /&gt;ghi&lt;/dl&gt;    &lt;dl&gt;456&lt;/dl&gt;    &lt;dl&gt;123&lt;br /&gt;abc&lt;/dl&gt;    &lt;dl style=&quot;bottom:25px;&quot;&gt;789&lt;/dl&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

最も愚かな方法を使用してインラインを追加しました。 style

あなたが望むことを達成するのは本当に難しいと感じます。それを垂直に配置し、番号を定義し、フロートを削除し、番号に達したら2列目に配置します
または、高さを定義します。 dlして、位置が揃うようにします

このレイアウトのフロートが処理できず、高さが一貫していない場合は、jqueryプラグインを使用して滝石積みをレイアウトできます

滝石積みレイアウトAPI

このレイアウトは処理できず、高さが一貫していません。jquery プラグインを使用して滝の石積みをレイアウトできます。レイアウトに来てください

滝の石積みのレイアウト API わかりました!

モデレーターが言ったように、JQ ウォーターフォールフロープラグインを使用して Petal Net と同様の効果を実現します

#1、#2 私の質問をよく読んでください:
1. マージンをゼロに設定します。私はそれを試しましたの前で、間に2pxの隙間があっても、dlで隙間を埋めれば押し込まれますが、実際には押し込めません。
2. これらの DL はスクリプトを通じてループアウトされます。単一の要素で操作できる場合は、質問しません。

現時点では、滝の流れのレイアウト #4 が石積みであることを祈るばかりで、BlocksIt と同じスタイル制御と互換性の問題が発生しないことを願っています。！！

4階で正解！
投稿者は常に誤解を抱いています。あなたの DL には実際には 3 行あるのに、3 行目を 2 行目の前に詰め込むと主張していますか?これは間隔とは関係なく、行数が間違っています。

上の階では、元のコードの div 内の dl の順序を変更してみると、後の dl が右上に詰め込まれていることがわかります。

元の問題では、引き続き #7 の方法を使用しますが、起こり得るスタイルの問題を制御するには js を使用する必要があります。それだけです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。