4

問題のサイトはこちらです。 http://www.splintercomm.net 水平方向に間隔を空けて配置しながら、div を隣り合わせに配置する必要があります。要するに、私はそれらを積み重ねたくないので、並べて置きたいのです。

body {
background-image:url('wild_oliva.png');
} 
div.container   {
overflow: hidden;
}
div.end {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-bottom:auto
}
div#body {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-left:20%;
overflow: hidden;
width:80%;
}
div#sidebar {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;

float:left;
width:18%;
float:left;
}
4

3 に答える 3

1

Firefox、Chrome、Safariでブロックが並んでいるのを見て、ここで何が機能していないのか正確にはわかりません。これはIE7でのみ問題になりますか？

いずれにせよ、私はボディdivを左にフロートさせるだけです。div＃bodycssを次のように置き換えます。

div#body {
  float: left;
  margin-left: 1%;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

左マージンは、幅からすべての境界線（4px）を引いた値の2％未満である必要があることに注意してください。そうしないと、本体のdivが広すぎて、サイドバーの下に流れます。

もう1つのオプションは、div＃bodyを右にフロートさせ、左マージンを省略することです。

div#body {
  float: right;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

基本的に、すべてを同じ行に並べる場合は、余白、境界線、パディング、およびボックス領域の合計幅をブラウザ（ウィンドウ）の幅の100％以下にする必要があります。

18％（サイドバーの幅）+ 80％（ボディの幅）+ 2px（サイドバーの境界線）+ 2px（ボディの境界線）

= 98％+ 4px、これはほとんどのブラウザ幅で100％未満です。

于 2012-10-27T01:29:47.120 に答える
1

このプロパティを使用して、div をインラインにすることができます。

display:inline-block;

注 1: doctype 宣言に誤りがあります

<doctype html>

する必要があります

<!doctype html>

注 2:サンプル コードには div が 1 つしかありません。

于 2012-10-27T01:11:48.817 に答える
0

質問の意味がわからないのですが、削除margin:20%;してくださいdiv#body

于 2012-10-27T01:39:54.950 に答える