1

私は実際に私の質問に名前を付ける方法がわかりません。しかし、私は何をする必要があるかを説明します。

HTML は次のように単純です。

<div id="left_div"></div>
<div id="right_div"></div>

left_div幅を 100% にするために左側に配置する必要がありますが、右マージンは 320px に固定されています。right_div固定幅 300px で、横に配置する必要がありますleft_div。

私がこれを行うとき、私はこれを非常に簡単に行うことができることを知っています:

<div id="right_div" style="float:right;width:300px"></div>
<div id="left_div" style="margin-right:320px;"></div>

しかし、問題は、前に述べたように HTML が必要なことです。問題の順序DIVs。誰かが理由を不思議に思うなら、それは私がレスポンシブ Web サイトに取り組んでいるためです。必要な場合、ビューポートが狭すぎるright_div場合left_div、そして、私が上に置いた単純な解決策ではできません。

私の質問が理にかなっていることを願っています。回答や役立つヒントに感謝します。

ああ、言い忘れましたが、これは JS ではなく、純粋な HTML+CSS である必要があります。また、IE7 以下をサポートする必要はありません。

更新: left_div width:auto である必要があり、右マージンは固定する必要があります (例: 300px)。

4

3 に答える 3

0

純粋な HTML + CSS だけでは、あなたが望むことはほとんど不可能だと思います。

あなたのために働くかもしれないのは、私がやったことのようなものです: http://jsfiddle.net/fmZAm/

HTML:

<div class="main">
  <div class="left"></div>
  <div class="right">
    <div class="fixed_content"></div>
  </div>
</div>

CSS:

div.main
{ 
  min-height: 500px;  /* force some height */
  min-width: 300px;   /* min width to show content */
  text-align: center; /* center content when in vertical responsive mode */
  font-size: 0px;     /* remove blank space from 'inline-block' display */
}
div.main > div  /* left and right divs */
{  
  width: 100%;           /* force both to have as max width as possible */
  min-height: inherit;   /* same min height as parent */
  min-width: inherit;    /* same min width as parent to show content */
  display: inline-block; 
}
div.left
{  
  max-width: 58%;     /* 100% width from max of 58% parent width */
  background-color: lightgreen;
}
div.right
{ 
  max-width: 42%;     /* 100% width from max of 42% parent width */
  text-align: right;  /* put child 'inline-block' divs to the right */
  background-color: dodgerblue;
}
div.right > div.fixed_content
{ 
  width: 300px;        /* set the 300px right div you want */
  min-height: inherit; /* same min  height as parent */
  background: orange; 
  display: inline-block; 
}

両方の div (左と右) には % 幅があるため、どちらも現在の最大幅に基づいてサイズ変更されますが、右の div 内に固定幅の div があります。したがって、右側の div のサイズを 300px 幅 (子 div の固定幅) に変更すると、左側の div の下に移動します。

それが役に立てば幸い！

于 2013-03-24T18:34:07.583 に答える
0

レイアウトをレスポンシブにしたい場合は、このリストにあるColumnalや1140などの CSS フレームワークを使用する必要があります。

これらのフレームワークのほとんどは、グリッド システムをサポートしています。これは、レイアウトを構築するための最良の方法であり、フロートやピクセルについて心配する必要はもうありません。

于 2013-03-24T16:23:22.217 に答える