Question

我想得到这样的结构：

---------------------------------------------
| head                                      |
---------------------------------------------
|left-menu||---content-div-------------------
| fixed   ||                     |          |
|         ||    content-left     | con-right|
|         ||--------------------------------|

css文件：

.left-menu {
    position:fixed; /* fix menu, no scroll  */
    left:0;
}
.content-div {
    position:absolute;
    float:right;
    left:150px;
}
.content-right {
    width: 310px;
    float: right;
}
.content-left {
    float: left;
}

的div：

<div>
    <div class="left-menu" >    </div>

    <div class="content-div">
        <div class="content-left">  </div>
        <div class="content-right"> </div>
    </div>
</div>

我在下一行收到content-right，与content-left不在同一行，就像我content-left width=105%一样，但我没有。Deployment target Assets.xcassets。我试过这个和其他一些建议，但没有运气。我该如何解决这个问题？

Answer 1

Flexbox可以做到这一点。

* {
  margin: 0;
  padding: 0;
}
.parent {
  display: flex;
  height: 100vh;
}
.left-menu {
  position: fixed;
  /* fix menu, no scroll  */
  left: 0;
  width: 150px;
  background: red;
  height: 100%;
}
.content-div {
  margin-left: 150px;
  background: blue;
  flex: 1;
  display: flex;
}
.content-right {
  flex: 0 0 310px;
}
.content-left {
  flex: 1;
  background: orange;
}

<div class="parent">
  <div class="left-menu"></div>
  <div class="content-div">
    <div class="content-left"></div>
    <div class="content-right"></div>
  </div>
</div>

Answer 2

查看演示的JsFiddle

<强> HTML

<div>
    <div class="header">HEADER</div>
    <div class="left-menu" >LEFT MENU</div>

    <div class="content-div">
        <div class="content-left">CONTENT LEFT</div>
        <div class="content-right">CONTENT RIGHT</div>
    </div>
</div>

<强> CSS

.header { 
  height: 70px;
  background: blue;
}
.left-menu {
  width: 120px;
  background: red;
  position: fixed;
  left: 0px;
  top: 70px;
  bottom: 0px;
}
.content-div {background: yellow;margin-left: 120px}
.content-div div {
  display: inline-block;
  width: 49%;
}
.content-left {background: aqua;}
.content-right {background: green;}

Answer 3

定位任何东西都是一种痛苦，我建议使用bootstrap来做这样的事情。

（我刚看到上面的评论是关于建议同样的事情，但我会给你代码，这样你就可以实现它了）

Bootstrap提供了一个很好的CDN，您可以将其放入html并随身携带引导程序！

所以把所有这些都放在你的HTML中......

<html>
  <head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

   </head>

 <body>

 <div class="container">
     <div class="row">
       <div class="col-lg-12">
         <h1>Header</h1>
       </div> <!-- col-lg-12" -->
     </div> <!-- row -->


     <div class="row">

       <div class="col-lg-3" style="position: fixed;">
          <p>Left Menu Fixed</p>
       </div> <!-- col-lg-3 -->

       <div class="col-lg-6">
          <p>Content Left</p>
       </div> <!-- col-lg-6 -->

       <div class="col-lg-3">
          <p>Content Right</p>
       </div> <!-- col-lg-3 -->


      </div> <!-- row -->
 </div> <!-- container -->
 </body>
</html>

这将提供您建议的布局。

希望这有帮助！

Answer 4

这应该适用于你想要的东西

.left-menu {
position:fixed; /* fix menu, no scroll  */
left:0;
width: 150px;
height: 100%;
}
.content-div {
position:fixed;
left:150px;
right: 0px;
height: 100%;
}
.content-right {
float: right;
}
.content-left {
float: left;
}

如果你想看看他们如何定位自己，请在.content-left和.content-right上设置高度和背景颜色。

Answer 5

 .left-menu {
    position:fixed; /* fix menu, no scroll  */
    left:0;
    background: black;
    width:15%;
    height: 100%;
}
.content-div {
    position:absolute;
    float:right;
    left:16%;
    background: red;
    width:84%;
    height: 100%;
}
.content-right {
    width: 310px;
    height: 100%;
    float: right;
    background: yellow;
}
.content-left {
    float: left;
    background: green;
    height: 100%;
    width: calc(100% - 310px);
}

如何水平定位三个div

5 个答案: