CSS/HTML で間違っていることを誰かが指摘してくれることを期待していました。
私は自分の個人的な Google/ig の代替品を展開しているので、私が何をしようとしているのかご存知でしょう。
ボックスには、行の間にその巨大なスペースがあってはなりません。右側の最後の列のように、すべてのボックスが互いに一列に並ぶようにホップしていました。
すみません、CSSは私の得意分野ではありません。私がこれについてすべて間違っている場合は、是非、私を教えてください。私は学ぶためにここにいます。
何か助けはありますか？
これは私が得るものです
そしてフォトショップの魔法で、これが私が望んでいることです。
Web Developer Div Size Tool を実行すると、次のようになります。
関連する HTML
それぞれwidget-containerがサイトごとに繰り返されます。次に、liがループされて、ul
<div id="content">
<--! Begin repeated content →
<div id="widget-container">
<div id="widget-head">
<h3><a href="#" target="_blank">FEED TITLE</a></h3>
<div id="widget-edit">EditButton</div>
</div>
<div id="widget-content">
<ul id="widget-feeds">
<li>
<a href="#" onclick=""> <img src="images/icons/hidden.gif"> </a>
<a href="#" target="_blank" title="" >Feed Link</a>
<div class="widget-desc"> Content Here </div>
</li>
<li>
<a href="#" onclick=""> <img src="images/icons/hidden.gif"> </a>
<a href="#" target="_blank" title="" >Feed Link</a>
<div class="widget-desc"> Content Here </div>
</li>
<li>
<a href="#" onclick=""> <img src="images/icons/hidden.gif"> </a>
<a href="#" target="_blank" title="" >Feed Link</a>
<div class="widget-desc"> Content Here </div>
</li>
</ul>
</div>
<div class="fclear"></div>
</div>
</div>
および関連する CSS ドキュメント
@charset "UTF-8";
/* CSS Document */
/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
/* End Reset */
body {
font-size: 0.8em;
font-family: Arial,Verdana,Sans-Serif;
background-color: #FFF;
}
a {
color: #36C;
}
.hidden {
display: none;
}
.fclear {clear:both}
#content #widget-container {
width: 30%;
background-color: #ddd;
float: left;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 25px;
white-space: nowrap;
display: block;
}
#content #widget-container #widget-head {
height: 25px;
padding: 5px;
overflow: hidden;
line-height: 25px;
}
#content #widget-container #widget-head h3 {
font-size: 14px;
width: 90%;
float: left;
}
#content #widget-container #widget-head #widget-edit {
float: right;
width: 12px;
padding-top: 5px;
}
#content #widget-container #widget-content {
background-color: #FFF;
margin: 1px;
}
#content #widget-container #widget-content #widget-feeds {
}
#content #widget-container #widget-content #widget-feeds ul {
overflow: auto;
}
#content #widget-container #widget-content #widget-feeds li {
display: block;
white-space: normal;
word-wrap: normal;
margin-bottom: 0 !important;
padding: 4px 0 9px 0 !important;
}
#content #widget-container #widget-content #widget-feeds li a {
}
#content #widget-container #widget-content #widget-feeds li .widget-desc {
white-space: normal;
display: none;
margin-bottom: 4px;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 15px;
overflow: hidden;
}