1

我有以下问题：我想创建一个 html 页面，其中 a#sidebar跨越恒​​定的 27px 并且 a#content跨越屏幕的其余部分。#content分为两个区域，分为 40% - 60% 。

<html>
  <body>
    <div id="sidebar">
    </div>
    <div id="content">
      <div id="forty-percent">
      </div>
      <div id="sixty-percent">
      </div>
    </div>
  </body>
</html>

我试图制作以下CSS：

#sidebar{
  width:27px;
}
#content{
  position:absolute;
  padding-left:27px;
  width:100%;
}

但是我不能将内容分成 40%-60%，因为百分比是根据宽度#content而不是内部面积计算的。

我究竟做错了什么？你能帮忙吗？

更新：

不工作版本的演示：

http://jsbin.com/iseqon/1/edit

理想情况下，虚线框应在蓝色框内并排放置。

4

4 回答 4

2

你需要这个来浮动#sidebar并给出一个等于margin-left的#content，并且还要浮动两个内盒，这样它们就可以并排放置。

#sidebar {
    width:27px;
    float:left;
}
#content {
    margin-left:27px;
    overflow:auto;
}
#forty-percent {
    width:40%;
    float:left;
}
#sixty-percent {
    width:60%;
    float:left;
}

并且也不要在实际中使用#字符id

演示在 http://jsfiddle.net/gaby/8a7CN/

（您在http://jsbin.com/iseqon/4/edit上的固定 jsbin 演示，您需要记住边框会增加宽度，因此它不能很好地处理百分比）

于 2013-05-02T13:33:13.093 回答
2

这可能更适合您的需求。如果您想更好地控制 #sidebar 和 #content 垂直对齐，则必须使用 inline-block 来获得仅 CSS 的解决方案。

您可以在此处实时查看：http: //codepen.io/jpsirois/pen/dvbmEy

* {
  /* This prevent padding to be added on defined width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

body {
  font-size: 0; /* Need to be set to 0 to properly use inline-block here */
  color: white; /* For a better preview purpose only */
}

#sidebar,
#content {
  display: inline-block; /* Allow vertical-align control (float didn’t) */
  font-size: 16px; /* Reset font-size to normal */
  vertical-align: middle; /* Demo of vertical-alignement */
}

#sidebar {
  width: 27px; 
  background: darkred;
  height: 50px; /* For a better preview purpose only */
  margin-right: -27px; /* This allow #content to be inlined aside */
}

#content {
  font-size: 0; /* Need to be set to 0 to properly use inline-block here */
  width: 100%;
  padding-left: 27px;
}

#forty-percent,
#sixty-percent {
  height: 100px;/* For a better preview purpose only */
  display: inline-block;
  font-size: 16px; /* Reset font-size to normal */
}

#forty-percent {
  width: 40%;
  background: darkgreen;
}

#sixty-percent {
  width: 60%;
  background: darkblue;
}
于 2013-05-02T13:42:57.950 回答
1

如何拥有一个相对的父 div，然后让 div 在容器内以绝对位置向右或向左浮动。当父容器是相对位置而子容器是绝对位置时，子容器的位置相对于它们的容器。换句话说，类似的东西（未经测试，但应该给你正确的想法）

#wrapper {
  position:relative;
  width:100%;
  margin:50px;
}
#leftCol {
  width:60%;
  background-color:yellow;

}
#rightCol {
  width:40%;
  position:absolute;
  right:0px;
  top:0px;
  height:100px;
  background-color:red;
}
</style>  


<div id='wrapper'>
  <div='leftCol'>
  </div>
  <div id='rightCol'>
  </div>
</div>
于 2013-05-02T13:05:25.527 回答
-2 
I am using your HTML only change the CSS.
My CSS is

#sidebar
{
width:27px;
min-width:27px;
float:left;
}

#content
{
float:right;
width:100%-28px;
min-width:100%-28px;
}

#forty-percent
{
width:40%;
float:left;
}
#sixty-percent
{
width:60%;
float:right;
}

Hope this will help you.Thanks.
于 2013-05-02T13:21:38.783 回答