12

私はほとんど固定された2列のレイアウトを持っています:

  • 必要なだけのスペースを取る最初の列
  • 固定幅で右にフロートする 2 列目

レスポンシブデザインにしたいので、小さい画面サイズでは2列目が1列目より下で終わってしまいます。これは、2 列目の HTML が 1 列目の後にある必要があることを意味します。

私の問題は、そのマークアップを使用すると、右の列を適切にフロートできないように見えることです。浮かんでしまいますが、メインコンテンツの下にあります。

サンプルコードは次のとおりです。

HTML:

<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

CSS:

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    background-color: lightgreen;
}

JS フィドルはこちら: http://jsfiddle.net/zinkkrysty/U3fA8/

負のマージンも使用してみましたが、できないようです。

私の問題に対する他のアプローチがある場合（最初の列に幅を設定することを除く）、試してみてください

4

7 に答える 7

6

それらを親に入れ、サイドバーの位置を絶対として設定してから、レスポンシブ表示に別のスタイルのセットを使用します

html

<div class="parent">
    <div class='content'>
        sdaohdosahdaf
        <br />adfafhaskldjs sgdafadkfjas
        <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
    </div>
    <div class='sidebar'>
        daobf haohf asod agsdjfa
        <br />sidja ofhad
        <br />sojgh fadpfjas
    </div>
</div>

CSS

.parent {
    position: relative;
}
.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 120px;
    background-color: lightgreen;
}
/* Responsive bit */
@media only screen and (max-width: 320px) {
    .content {
        background-color: orange;
        margin-right: 0px;
    }
    .sidebar {
        background-color: red;
        position: relative;
        width: 100%;
    }
}

例

于 2013-02-07T10:30:00.790 に答える
3

最初の divposition:absolute;にand を持たせ、left:0px;必要に応じrightて、動的にフローティングされた左の div を持つ固定されたフローティングされた右の div を持つことができます。

デモ

HTML

<div id="parentDiv">
    <div id="leftDiv">
    </div>
    <div id="rightDiv">
    </div>
</div>

CSS

#parentDiv
{
    position:relative;
    overflow:hidden;
}
#leftDiv
{
    position:absolute;
    left:0px;
    top:0px;
    right:200px; //Increase it if you want a little space between the 2 divs.
    min-height:200px; // or bottom:0px; if you want a dynamic height
}
#rightDiv
{
    width:200px;
    float:right;
    min-height:200px;
}

デモ

于 2013-02-07T10:20:00.257 に答える
1

あなたのフィドルを見ると、margin-top:-60px; を追加するだけです。.sidebar css で上に移動します。CSS は次のようになります。

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    margin-top:-60px;
    background-color: lightgreen;
}
于 2013-02-07T10:32:26.517 に答える
1

以下のようにしてみてください...それはあなたを助けます...

.content {
    background-color: lightblue;
    float: left;
}
.sidebar {
    float: left;
    width: 120px;
    background-color: lightgreen;
}

このような必要があると思います...更新されたFiddleを試してください：http://jsfiddle.net/U3fA8/1/

于 2013-02-07T10:16:45.617 に答える
1

% で負のマージンを試してください

例 margin-top: -10%;

于 2013-02-07T10:17:04.677 に答える
0

最も簡単な解決策は、コンテンツとサイドバー div を交換することです。

それ以外の

<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

あなたがやる：

<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>
<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>

あなたのcssは同じままです。これがどのように見えるか、まさにあなたが探しているものです:)

http://jsfiddle.net/j1wu/vg08f4ep/

于 2016-03-19T01:42:38.287 に答える