2

そのため、複数の会社で使用されるページを作成していますが、いくつか問題があります。最初の例では、2つのdivのコードだけで問題ないように見えますが、各行の間にスペースが必要です。以下にcssも投稿しました。次に、2番目のリンクで、コードを使用する会社の1つのレイアウトでコードを貼り付けました。見た目は良くなりますが、サイドバーが押し下げられます。

http://tinyurl.com/bo6ukqe

http://tinyurl.com/cerzfwd

だから私はこれを修正するための最良の方法が何であるか興味があります。左のdivと右のdivを並べる必要があります。現在

  1. 左右のdivを揃えてほしい。つまり、両方とも同じ高さです。
  2. 各行の間に少しスペースがあればいいのですが。現在、写真は互いに重なり合っています。
  3. 適切なdivのサイズは、それがどれだけのスペースを持っているかに依存するようにしたいと思います。したがって、ある会社がサイドバーのために55％にする必要があるのではなく、別の会社がサイドバーがないために80％に変更する必要があります。

上記のリンクのコードを掘り下げたくない場合は、cssを次に示します。

<style type="text/css">
.body { border : 1pt solid black; }
.left { clear: left; float : left; width:226px; height:127px;  }
.right { float : right; width : 80%; }
.spacer { clear : both; height: 10px; }
img { border: none; }
p.description {
line-height:18px;
color:#767676;
font-size:12px;
}
p.description a {
font-weight:bold;
}
a.read-more-link {
border-top:none;
text-transform: uppercase;
margin:0; padding:0;
font-size:10px;
}
.read-more a {
border-top:none;
display: block;
text-align: right;
text-transform: uppercase;
margin:15px 0 0 0; padding:0;
text-decoration: none;

}

</style>
4

2 に答える 2

1

まず、あなたは閉じていません、直前に.content_left追加してこれを行います</div><div class="content_right"></div>

次に、次のそれぞれをカプセル化します。<div class="row"></div>

<div class="left"></div><div class="right"></div>

それから加えて

.row {
 padding: 5px 0;
 margin-left: 0;
 margin-right: 0;
 width: 60%;
}

それから

.content_right {
 width: 40%;
}
于 2012-12-20T16:20:53.887 に答える
1

＃1と＃2の場合：

各行の周りにラッパーdivを配置します。子要素をフローティングしているので、ラッパーが内側の高さを尊重して兄弟をプッシュするために、ラッパーもフローティングする必要があります。

<div style="float: left; width: 100%; clear: both; margin: 0 0 10px 0;"></div><!-- wrapper row -->

＃3の場合：

レスポンシブウェブデザインを学ぶ必要があります。

于 2012-12-20T16:22:30.600 に答える