html - 将固定大小的 div 浮动到右侧并在左侧具有灵活宽度的 div

Question

我得到了我想要的结果（http://jsfiddle.net/jcx3X/40/），但我很好奇为什么这个（http://jsfiddle.net/jcx3X/41/）不起作用。为什么必须div在 HTML 中列出的第一个是浮动的？

Answer 1

It is because the html is what determines the order of the dom (document object model) elements. The element that is not floated will act differently depending on the order.

Maybe THIS FIDDLE will help you on your quest. I just happened to be doing something similar.

HTML

<header class="global-header">
  header
</header>

<div class="container">

  <div class="column sidebar">

    aside content fixed width

  </div>

  <div class="column page">
    main content flexible width
  </div>

</div> <!-- .container -->

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.global-header {
  width: 100%;
  float: left;
  padding: 1rem;
}

.container {
  width: 100%;
  float: left;
  height: 100%;
  overflow: hidden;
}

.column {
  min-height: 100%;
  padding: 1rem;
}

.page {
  float: none; /* just to be clear */
  background: #C0FFEE;
  width: auto;
  overflow: hidden;
}

.sidebar {
  position: relative;
  width: 20rem;
  float: right;
  background-color: #f06;
  color: rgba(255,255,255,.8);
}