web-dev-qa-db-ja.com

HTMLがコンテンツの後にある場合、右フロートをプッシュするにはどうすればよいですか？

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

  • 必要なだけスペースをとる1列目
  • 幅が固定され、右に浮いている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/

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

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

csslayoutcss-floatresponsive-design
11
Cristian

それらを親に置き、サイドバーの位置を絶対値として設定してから、レスポンシブディスプレイに異なるスタイルのセットを使用します

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%;
    }
}

例

6
user2985029

first divにposition:absolute;および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;
}

[〜＃〜]デモ[〜＃〜]

3
Ali Bassam

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

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

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

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

私はあなたがこのように必要だと思います...更新されたFiddle： http://jsfiddle.net/U3fA8/1/

1
Pandian

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

例えば。マージントップ：-10％;

1
Kits

最も簡単な解決策は、コンテンツとサイドバーの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/

0
devjoe

@ 9205892 別のラッパーdivが必要であるという洞察に基づいて、絶対配置（2列以降のコンテンツで問題が発生する可能性がある）の使用を回避することがわかりました。レスポンシブデザインを実現しています。 2つのセクションを「float」に設定し、それらの幅を指定するだけです（パーセンテージを指定しただけです）。次に、レスポンシブ@mediaセクション、各セクションの幅を100％に設定すると、ブラウザはそれらを次々に配置します。

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;
    width: 60%;
    float: left;
}
.sidebar {
    top: 0px;
    right: 0px;
    width: 40%; /* 100% - .content.width */
    float: left;
    background-color: lightgreen;
}

/* Responsive bit*/
@media only screen and (max-width: 320px) {
  .content {
    background-color: orange;
    width: 100%; /* Leave no room for sidebar */
  }
   .sidebar {
    background-color: red;
    width: 100%; /* Sidebar is puffed up */
  }
}

デモ （他の回答のデモに基づく）

0
P.T.