我想构建下面的网页,同时将每个部分的文本和图像居中并保持网页响应。现在,我尝试了从 Flex 框到 Bootstrap 的行和列的所有内容,但要么是我的网页失去了响应能力,要么是我无法将内容集中在我正在创建的扇区内。
在满足这两个条件的同时,您会建议我如何进行下图所示的设计?
所需的网页结构
要设计这样的东西,您需要将其分解为多个部分。
In this case we can have the LEFT SIDE, CENTER CONTENT, RIGHT SIDE. I am breaking it down into columns because the laayout seems to be defined by the widths of these 3 sections. Then once we have each. Just piece it together.
nav {
width: 100%;
}
nav:after {
content: '';
display: table;
clear: both;
}
.side-body {
padding: 5px;
}
.header {
height: 100px;
flex-shrink: 0;
padding: 5px;
background-color: #feeeee;
}
.header img {
max-width: 100%;
max-height: 100%;
}
a {
float: left;
display: block;
padding: 5px;
background: #eeeeee;
width: 20%;
}
* {
box-sizing: border-box;
}
.center-layout {
display: flex;
flex-direction: column;
flex: 1 1 100%;
}
.body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
min-height: 400px;
background-color: #dddddd;
}
.layout {
display: flex;
}
.left-layout {
width: 200px;
flex-shrink: 0;
}
.right-layout {
width: 150px;
flex-shrink: 0;
}
<div class="layout">
<div class="left-layout">
<div class="header">
<img src="http://via.placeholder.com/200x100" />
</div>
<div class="side-body">
<h2>List</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="center-layout">
<div class="header">
<h1>Title</h1>
</div>
<nav>
<a>Home</a>
<a>About</a>
<a>Shop</a>
<a>Contact</a>
<a>Terms</a>
</nav>
<div class="body">
<img src="https://via.placeholder.com/200x200" />
</div>
</div>
<div class="right-layout">
<div class="header">
<h2>Info</h2>
</div>
<div class="side-body">
<h2>List</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
Flexbox just makes everything easy. Hope that helps.
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句