0

これが私の問題です。ページに液体レイアウトを使用しているので、サイトは常にウィンドウの幅に収まります。完璧に動作し、素晴らしいですね。私が抱えている問題は、ウィンドウのサイズが変更されるたびに、divが移動し、重なり合い、次の行に折り返されることです。

これが私のサイトなので、私が話していることがわかります：http ://www.kaiserroof.com/test/index2.html

私はcssの設計に少し慣れていません。簡単な修正があると確信していますが、理解できません。誰かが私を助けることができますか？（すぐにお願いします。私はこのウェブサイトで完了する準備ができています:)）これが私のCSSコードです：

html {
 padding: 0px;
 margin: 0px;
 width: 100%;
 position: static;
 border-collapse: collapse;
 overflow-x: hidden;
}
body {
 padding: 0px;
 margin: 0px;
 width: 100%;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 14px;
 color: #555;
 font-weight: 100;
 line-height: 18px;
}
#container {
 padding: 0px;
 margin: 0px;
 width: 100%;
 min-width: 600px;
 background: #eeeeee;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 14px;
 color: #555;
 font-weight: 100;
 line-height: 18px;
}
#row1 {
 width: 100%;
 float: left;
 background: #eeeeee;
}
#row2 {
 width: 100%;
 float: left;
}
#row3 {
 width: 100%;
 float: left;
 padding-top: 300px;
}
#row4 {
 width: 100%;
 float: left;
}
#row5 {
 width: 100%;
 float: left;
}
#logo {
 float: left;
 width: 13.5%;
}
#phone1 {
 width: 85%;
 float: left;
 text-align: right;
}
#phone2 {
 width: 79%;
 padding-right: 6%;
 float: left;
 height: 54px;
 text-align: right;
 vertical-align: top;
}
#buttonmenu {
 width: 86.5%;
 float: left;
 border: none;
 margin: 0px;
 padding: 0px;
 border-collapse: collapse;
 border-spacing: 0;
}
#backgroundleft {
 float: left;
 position: absolute;
 z-index: 1;
}
#intro {
 float: left;
 position: absolute;
 z-index: 2;
 padding-left: 15.5%;
}
#form {
 width: 34.5%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-left-style: none;
 padding-bottom: 76px;
}
#estimates {
 padding-left: 20px;
 padding-top: 10px;
 padding-bottom: 20px;
}
#form1 {
 padding-left: 20px;
}
#welcome {
 width: 34.75%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-left-style: none;
 border-right-style: none;
 text-align: center;
 padding-top: 10px;
}
#linksright {
 width: 30.5%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-right-style: none;
 text-align: right;
 padding-top: 10px;
 padding-bottom: 92px;
}
#bottomleft {
 width: 23%;
 float: left;
 padding-left: 50px;
 padding-top: 10px;
}
#bottommiddle {
 width: 50%;
 float: left;
 padding-top: 10px;
 text-align: center;
}
#bottomright {
 width: 20%;
 float: left;
}
td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: #BBBBBB;
}
a {
 text-decoration: none;
 color:#000;
 line-height: 20px;
}
A:hover { 
 text-decoration: underline;
 color: #000 
} 
.alternate {
 padding-right: 20px;
}
.object { 
 outline: none;
}
#object { 
 outline: none;
 margin: 0; 
  display: block; 
}
4

4 に答える 4

1

フォーム要素など、新しい行に折り返すことができないものもあります。min-widthこれらの各列（＃form、＃welcome、＃linksright）にを設定することで問題を非表示にできるため、特定のポイントを超えて縮小することはありません。または、＃containerの単一の最小幅を大きくします。これは、600pxでは明らかに物が重ならないようにするのに十分ではないためです。

于 2010-08-27T17:14:03.330 に答える
0

2つの外側の列を静的な幅にし、中央をパーセンテージにします。左右の余白にもパーセンテージを使用できます。

于 2011-06-01T15:36:30.227 に答える
0

対応するHTMLがないと、わかりにくいです。しかし、推測させてください。「float」と「width：100％」を使用して多くの要素を整列させると、それらはテキストフローに含まれなくなります。したがって、ページの残りの部分でサイズが変更されない場合があります。一部の要素では、「float」の代わりに「display：inline-block」を使用すると便利な場合があります。

于 2010-08-27T17:14:49.013 に答える
0

本当に、3列の固定幅レイアウトを使用することをお勧めします。それらのdivを伸ばすと見栄えが悪くなり、物事が奇妙になります。サイト全体をラッパーdivでラップしてから、中央に配置してみてください。そうすれば、divを伸ばすという狂気に対処する必要がなくなります。

div#wrapper{
   margin: 0 auto; // this will make everything center automatically.
   width: 960px;
}

ご質問にはお答えせず、別の解決策を提案して申し訳ありません。私はリキッドレイアウトのファンではありません。

于 2010-08-27T20:27:36.680 に答える