1
因此，我有一個3列布局，但由於某些原因，在我的中間列（片段中的文本列）中，它始終沿着邊緣到邊緣我的寬度爲.middle設爲70％。Flex媒體查詢中無法識別的Flex項目的寬度屬性
的div和P的是塊級元素，但我也不太清楚他們爲什麼留在我的媒體查詢，規範，你可以找到的代碼後底部寬度爲100％。
我希望p元素在側面有一些空間。
有問題的類是媒體查詢中的最後一個列表。
body {
background-color: green;
}
html,
body {
height: 100%;
}
.container {
display: flex;
position: absolute;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
width: 70%;
margin: auto;
background-color: white;
border: 1px solid yellow;
}
.left {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: space-around;
order: 1;
//flex: 1 20%;
width: 25%;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
//flex: 2 20%;
width: 50%;
height: 100%;
}
.right {
display: flex;
position: relative;
flex-flow: row wrap;
align-content: flex-start;
justify-content: center;
order: 3;
width: 25%;
//flex: 1 50%;
}
div.list {
display: flex;
flex-flow: row wrap;
width: 70%;
justify-content: center;
line-height: 300%;
;
border: 1px solid pink;
}
.right .list {
// text-align: center;
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
#bigwrap {
height: 100%;
}
.container {
display: flex;
//position: absolute;
position: relative;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 12%;
}
.container img {
margin-bottom: 10%;
}
.container img:first-child {
margin-top: 5%;
}
.middle p:first-child {
margin-top: 8%;
}
.left,
.middle,
.right {
// border-right: 1px solid blue;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
flex: 2 20%;
}
.right .list {
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
.right .headbox {
border: 1px solid orange;
width: 70%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
@media all and(max-width: 800px) {
#nav {
justify-content: space-around;
}
}
@media all and (max-width: 500px) {
#nav {
flex-direction: column;
/*updated*/
margin-bottom: 7%;
}
#nav ul {
padding-left: 0;
/*added*/
}
#nav li {
flex: 1 1 100%;
/*updated*/
padding: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav li a {
text-align: center;
padding: 5px;
margin: 5px;
}
.box img {
max-width: 100%;
margin-bottom: 9%;
}
#bigwrap {
width: 100%;
border: 1px solid gray;
}
.container {
flex-flow: row wrap;
height: 100%;
width: 100%;
}
.left,
.right {
flex: 1 100%;
}
.middle {
width: 70%;
}
}<div id="bigwrap">
<div class="container">
<div class="left">
<img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
<img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
</div>
<div class="middle">
<div class="box">
<p>
Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
</p>
</div>
<div class="box">
<p>
Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
</p>
</div>
<div class="box">
<p>
Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
</p>
</div>
</div>
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Hours</a>
</li>
<li><a href="#">Plan</a>
</li>
<li><a href="#">Directions</a>
</li>
</ul>
</div>
</div>
</div>
</div>