Question

我在这里有一个问题，我不知道如何做以下事情，即将其分为3个部分。我可以向您展示一个我想要它的样子的例子，我只是想知道如何将它分成3个部分。

example

＆＃13;

<style>
    * {
        margin: 0;
        box-sizing: border-box;
    }
    html {
        height: 100%;
        background-color: yellow;
        overflow: hidden;
    }
    body {
        height: 100%;
        background-color: #ddd;
    }
    #header {
        height: 10%;
        border-bottom: 3px solid red;
    }
    h2, h3 {
        text-align: center;
    }
    #wrap {

    }
    .window { 
    
    }
    .pane { 

     }
    #window1 {
          
    }
    #window2 {

＆＃13;

<body>
<div id="header"><h2>Header</h2></div>

<div id="wrap">
    <div id="window1" class="window" >
        <h3>Window 1</h3>
        <p>
            Helloo
        </p>
    </div>
    
    <div id="window2" class="window">
        <h3>Window 2</h3>
        <div id="pane1" class="pane">
            Pane 1
        </div>
        <div id="pane2" class="pane">Pane 2</div>
    </div>
</div>
</body>

＆＃13;

Answer 1

https://jsfiddle.net/jpat82792/zb6gnc9y/12/

<强> HTML

标题

<div id="wrap">
    <div id="window1" class="window" >
        <h3>Window 1</h3>
        <p>
            Helloo
        </p>
    </div>

    <div id="window2" class="window">
        <h3 class="window-banner">Window 2</h3>
        <div id="pane1" class="pane">
            Pane 1
        </div>
        <div id="pane2" class="pane">Pane 2</div>
    </div>
</div>
</body>

<强> CSS

* {
    margin: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
    background-color: yellow;
    overflow: hidden;
}
body {
    height: 100%;
    background-color: #ddd;
}
#header {
    height: 10%;
    border-bottom: 3px solid red;
}
h2, h3 {
    text-align: center;
}
#wrap {
height: 100%;
position: relative;

}
.window-banner{
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
}
.window { 
  width:50%;
  position:relative;
  float:left;
  height:100%;

}
.pane { 
  width: 100%;
  position: relative;
  height: 50%;
  text-align: right;
 }
 #pane1{
   border-bottom:1px dashed;
 }
#window1 {
      border-right:1px solid;
}
#window2 {
  border-left:1px solid;
}

我嘲笑这个小提琴基本上可以实现你的参考图像。但是在你发表这篇文章之前，请继续阅读，因为这可以节省你一大堆时间。

如果您有想要执行的设计，请执行您首先知道如何操作的所有内容。你用小提琴做得很好。
然后使用您喜欢的浏览器开始检查dom。确定父元素的大小。如果它们太小，您将最终得到匆匆忙忙的内容或剪辑内容。如果发生这种情况，首先要使父元素变大。在你的代码中，#wrap没有填充可用空间。所以加高：100％;修好了。
将内容块放在正确的位置。所以拿起窗格让它们填满适当的空间。
现在一切都是正确的大小和位置担心文本内容。因此，将窗格推到右侧，使窗口居中而不移动窗格。在这里，我不得不研究并找到一篇关于如何做到这一点的精彩文章。我使用了一个简单的谷歌搜索“如何将一个绝对定位的元素居中”并被引导到这个gem
然后我在窗口和第一个窗格中添加了边框以实现边框效果。

为什么我输入了所有内容？希望我的过程可以帮助您了解下次遇到令人生畏的问题时您可以做些什么。把它一块一块地拿走。首先是布局，然后是细节。

您编写的代码越多，研究每种语言使用的概念模型就会越好。建立一个坚实的基础，你将能够立即敲出这些东西。祝你好运。

如何使用CSS将页面分为3个部分？

1 个答案:

标题