1

私は流動的なグリッドのウェブサイトを作ろうとしていますが、cssを使用するだけでは修正できないように見える問題に直面しています。明らかに私は何か間違ったことをしているが、私はただ何を見つけることができない。

これが重要です。1つの列（div：左）と1つの本文（div：右）がインラインで表示されています。ステージでは、左のdivの幅は180で、右のdivは640pxに達するまで成長しています（youtubeのように）。ステージ2では、列を120ピクセルから150ピクセルにさらに大きくしたいのですが、列が大きくなると、十分なスペースがあるにもかかわらず、右にdivが押し下げられます。私はそれがマージンのテクニックと関係があると思っていますが、私はそれを見つけることができず、Javaを使用せずにこれを行おうとしているので私が使用できる代替案を知りません。

これが私のjsfiddleです：これは問題を明確に示します： http： //jsfiddle.net/tomvisser/WcbYL/embedded/result/

私は私が得ることができるすべての助けに満足しています。

前もって感謝します。

<body>
<div class="gridContainer clearfix">
  <div id="center">
    <div id="left">This is the content for Layout Div Tag "left"</div>
    <div id="right">This is the content for Layout Div Tag "right"</div>
  </div>
</div>
</body>

これがcssです：

#left {
    float: left;
    height:400px;
    width: 150px;
    display:inline;
    background-color:#F00;
}

#right {
    margin-left:150px;
    background-color: #6F0 ;
    height:400px;
}


@media only screen and (min-width: 650px) {
.gridContainer {}

#right {
    margin-left:0px;
    width:500px;
    float:right;
    display:inline;
}
#left {
    margin-left:0px;
    float: right;
    width:100%;
    margin-right:500px; 
}
4

2 に答える 2

0

こんにちは私はあなたのコードを試し、あなたのための解決策を見つけました。それがあなたのために役立つことを願っています。ここでは、ページの合計幅が1024pxであると仮定しています。

HTMLコード

<div class="gridContainer clearfix">
  <div id="center">
    <div id="right">This is the content for Layout Div Tag "right"</div>
    <div id="left">This is the content for Layout Div Tag "left"</div>
  </div>
</div>

CSS

<style type="text/css" >
#left {
    height:400px;
    background-color:#F00;
    width:512px;
}
#right {
    background-color: #6F0 ;
    height:400px;
    float:right;
    width:512px;
}
</style>

ここでは、ページの合計幅が1024pxであると想定しているため、各divに幅512pxを指定しています。左の幅を12 px増やす場合は、512px + 12px = 524pxを意味し、divの右幅から12pxを減らす必要があります。 widthは、ページの合計幅、つまり1024pxを超えることはできません。減少すると、500pxになり、再び524px + 500px = 1024pxになります。その場合、右のdivは押し下げられません。あなたが理解し、あなたのために働くことを願っています。

于 2013-03-19T06:12:15.190 に答える
0

はい、それはそれを押し下げるマージンです。あなたが正確に何を求めているのかはわかりませんが、おそらくあなたが2divにmax-widthプロパティを与えることを探しているに違いありません。

したがって、ステップ2（メディアクエリ？）では、余白を削除して、次のようにしてみてください。

max-width: 180px;

左の列。

これは、メディアクエリブロックで編集したコードです。

#right {
    margin-left:0px;
    width:500px;
    float:right;
    display:inline;
}
#left {
    margin-left:0px;
    float: right;
    max-width:180px;
}

わざと浮かんでいますか？

于 2013-03-19T06:18:17.020 に答える