-1

为了保持它们之间的空间，我想为我的网站定位一些特定格式的div，然后向它们添加内容。我一直在对页面进行响应，所以我想知道如果以这种方式定位这些div，并且响应性是可行的。我想它的结果可能是这样的：如何使用CSS将div的位置设置为这样？

是X和Y两个div的我已经创建（页眉和菜单）和Z页脚。 div的我喜欢把这些职位是那些DIV 1，DIV 2和DIV 3

眼下以上（标题和菜单）的两个主要部分风格是这样的：

* { 
    margin:0; 
    padding:0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

header { 
    width:90%; 
    height:30%; 
    margin: 0 auto; 
    background-color:darkblue; 
    color:white; 
    z-index: 105; 
    position:relative; 
} 

nav { 
    width:90%; 
    height:22%; 
    margin: 0 auto; 
    background-color:skyblue; 
}

和HTML我有一刻对于那些DIV 1，DIV 2和DIV 3是这样的：

<div id="content"> 
    <div id="leftinfo"> 
     <ul> 
      <li>INFO</li> 
      <li>ABOUT</li> 
     </ul> 
    </div> 


    <div id="hcontent"> 
     <div class="tophcontent"> 

     </div> 
    </div> 


    <div id="hcontent2"> 
     <p></p> 
    </div> 
</div>

我一直在挣扎于如何定位它像这样，维持与其他div的网络流量。任何有关它的帮助或提示将非常感激。

来源

2016-04-23 Jim

你的意思是可扩展的，其这些div resize在按比例基础上，屏幕宽度？ –

是的，并将DIV1列放在内容的两个水平分区旁边。谢谢。 – Jim

发布你一个完全动态的答案，无论内容是小还是大，都会增长/填充页面。 – LGSon

下面是使用display: flex样品。它今天有大约94％的浏览器支持，我认为可以考虑非常好。

与此相关的一个很大的好处是，与float和inline-block版本相比，每个元素的内容都是完全动态的。

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.info, .about, .content-left, .content-right-top, 
 
.content-right-bottom, .footer { 
 
    border: 1px solid; 
 
} 
 
.wrapper { 
 
    flex: 1; 
 
    display: flex; 
 
    min-height: 100%; 
 
} 
 
.content-left, .wrapper-inner { 
 
    flex: 1; 
 
} 
 
.wrapper-inner { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100%; 
 
} 
 
.content-right-top, .content-right-bottom { 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div class="info"> 
 
    Info<br> 
 
    2 lines 
 
    </div> 
 

 
    <div class="about"> 
 
    About<br> 
 
    in<br> 
 
    3 lines 
 
    </div> 
 

 
    <div class="wrapper"> 
 
    <div class="content-left"> 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
    </div> 
 
    <div class="wrapper-inner"> 
 
     <div class="content-right-top"> 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     </div> 
 
     <div class="content-right-bottom"> 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="footer"> 
 
    Footer<br> 
 
    has 2 lines 
 
    </div> 
 
</div>

来源

2016-04-23 13:07:24 LGSon

我猜你想要的东西，像

https://jsfiddle.net/2dxzr1mv/3/

*{ 
    box-sizing:border-box; 
    white-space: nowrap; 
} 
div{ 
    padding:0; 
    margin:0; 
} 
.div1{ 
    width:20%; 
    height:100%; 
    background-color:red; 
    min-height:100vh; 
    display:inline-block; 
} 
.wrapper{ 
    width:80%; 
    min-height:100vh; 
    display:inline-block; 
} 
.div2,.div3{ 
    width:100%; 
    min-height:50vh; 
    background-color:yellow; 
    word-wrap: break-word; 
    overflow:hidden; 
    white-space: normal; 
} 
.div3{ 
    background-color:blue; 
}

来源

2016-04-23 10:39:58 QoP

这是一个很好的答案，谢谢。然而，在DIV2中，我的临时文本离开了div。如何纠正？ – Jim

在你的div2中使用word-wrap：break-word – QoP

我没有得到它的纠正，但谢谢你的答案。 – Jim

我已经试过类似的图片。

CSS

* { 
    margin:0; 
    padding:0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
body { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
#content { 
    table-layout: fixed; 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
#content > div { 
    display: table-cell; 
} 
.tophcontent { 
    height: 40px; 
    margin: 0 10px; 
    border: 2px solid orange; 
} 
.midhcontent { 
    margin: 10px; 
    margin-bottom: 0; 
    height: calc(100% - 46px); 
    border: 2px solid green; 
} 
#leftinfo { 
    border: 3px solid gray; 
    width:120px; 
}

HTML

<div id="content"> 
    <div id="leftinfo"> 
     <ul> 
      <li>INFO</li> 
      <li>ABOUT</li> 
     </ul> 
    </div> 


    <div id="header"> 
     <div class="tophcontent"> 
     </div> 
     <div class="midhcontent"> 
     </div> 
    </div> 
</div>

这里是我的JSfiddle

来源

2016-04-23 10:42:11

这不允许我在div乱动时添加内容到“.tophcontent”和“.midhcontent”。任何想法如何纠正？ – Jim

@Jim一切都很好https://jsfiddle.net/us2mhL9v/7/，但我已将“.tophontent”的高度设置为“40px”，因此文本会垂直溢出“DIV”。 – 2016-04-23 14:22:28

难道这样的事情，你是什么意思？

Codepen example

body, html{ 
    height:100%; 
} 

#wrapper{ 
    position:relative; 
    width: 90%; 
    height:100%; 
    margin:0 auto; 
} 

.left{ 
    float:left; 
    width:30%; 
    height:100%; 
    background:green; 
} 

.top-right{ 
    position:absolute; 
    right:0; 
    left:31%; 
    height:30%; 
    float:left; 
    background:blue; 
} 

.bottom-right{ 
    position:absolute; 
    right:0; 
    left:31%; 
    bottom:0; 
    top:32%; 
    float:left; 
    background:red; 
}

来源

2016-04-23 10:43:45 krunos

如何使用CSS将div的位置设置为这样？

回答

CSS

HTML

相关问题