1

我实际上不知道如何命名我的问题。但我会解释我需要做什么。

HTML 很简单：

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

我需要left_div在左边，宽度为 100%，但右边距固定为 320 像素。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事情的顺序。如果有人想知道为什么，那是因为我正在开发响应式网站，当视口太窄时，我需要在right_div下面left_div。我不能用上面提到的简单解决方案来做到这一点。

我希望我的问题是有道理的，我感谢任何答案或有用的提示。

哦，我忘了提到我需要这是纯 HTML+CSS，没有 JS。而且我不需要支持IE7及以下。

更新： left_div必须是 width:auto 并且右边距必须是固定的（例如 300px）。

4

3 回答 3

0

如果你希望你的布局是响应式的，你应该在这个列表中使用像Columnal、1140或更多的 CSS 框架。

这些框架中的大多数都支持网格系统，这是构建布局的最佳方式，您不必再担心浮动和像素。

于 2013-03-24T16:23:22.217 回答
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

我有同样的问题，我使用 position:absolute 解决了它。

HTML

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

CSS

.container {
  position:relative;
}

#left_div {
  float: left;
  width: auto;
  margin-right: 320px;
}

#right_div {
  position:absolute;
  top:0;
  right:0;
  width: 300px;
}
于 2015-10-15T09:40:28.630 回答