Question

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

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重要的顺序。如果有人想知道为什么，那是因为我正在处理响应式网站，我需要的地方，当视口太窄时，right_div低于left_div。而且我不能用上面提到的简单解决方案。

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

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

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

Answer 1

如果您希望布局具有响应性，则应在Columnal中使用1140，this list或更多的CSS框架。

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

Answer 2

我认为只要纯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。

希望它有所帮助！

Answer 3

我有同样的问题，我用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;
}

如何使2个div浮动，左边有固定的右边距？

3 个答案:

HTML

CSS