我正在嘗試在彈性項目之間插入換行符，如本答案所示，使用：.line-break {
width: 100%;
}<div class="line-break"></div>最后一個彈性項目之后的元素。然而它不起作用：當(dāng)我試圖讓它看起來像這樣：我有這個代碼：.links { display: flex; justify-content: flex-end; border: 1px solid black;}.links .button { border: 1px solid white; padding: 6px; text-align: center; margin: 20px;}.line-break { width: 100%;}.menu-container { color: #fff; padding: 20px 0; display: flex; justify-content: space-between; align-content: space-between; flex: 1 0 auto; background-color: red; width: 100%; flex-flow: row wrap;}.menu { width: 900px; display: flex; justify-content: space-between; align-items: center;}.links { display: flex; justify-content: space-around; border: 1px solid black;}<div class='menu-container'> <div class='menu'> <div class='date'>Aug 14, 2016</div> <div class="circle"> <img class="menu-logo" width=1 50 src='${pageContext.request.contextPath}/resources/img/autoparts_logo10.png' /> </div> <div class='links'> <div class="login button" style="cursor: pointer" onclick="location.href = '/showLoginPage'">Login</div> <div class="logout button" style="cursor: pointer" onclick="location.href = '/logout'">Logout</div> </div> <div class="line-break"></div> <div class="user-info"> <div class="balance"> Balance: $100 </div> <div class="busket"> Busket: $0 </div> </div> </div></div>JSFiddle： https: //jsfiddle.net/2zsq98hk/
2 回答
揚(yáng)帆大魚
TA貢獻(xiàn)1799條經(jīng)驗 獲得超9個贊
如果您添加flex-flow: wrap到.menu代碼中，則可以按照您的意愿工作。
hr在這種情況下是你的line-break班級。
.links {
? ? display: flex;
? ? justify-content: flex-end;
? ? border: 1px solid black;
}
.links .button? {
? ? border: 1px solid white;
? ? padding: 6px;
? ? text-align: center;
? ? margin: 20px;
}
.line-break {
? ? width: 100%;
}
.menu-container {
? ? color: #fff;
? ? padding: 20px 0;
? ? display: flex;
? ? justify-content: space-between;
? ? align-content: space-between;
? ? flex: 1 0 auto;
?
? ? background-color: red;
? ? width: 100%;
? ? flex-flow: row wrap;
}
.menu {
? ? width: 900px;
? ? display: flex;
? ? justify-content: space-between;
? ? align-items: center;
? ? flex-flow: wrap;
}
?
.links {
? ? display: flex;
? ? justify-content: space-around;
? ? ?border:1px solid black;
}
?
?
<div class='menu-container'>
? ? <div class='menu'>
? ? ? ? <div class='date'>Aug 14, 2016</div>
? ? ? ? <div class="circle">
? ? ? ? ? ? <img class="menu-logo" width = 150 src=
? ? ? ? ? ? ? ? ? ? '${pageContext.request.contextPath}/resources/img/autoparts_logo10.png'/>
? ? ? ? </div>
? ? ? ? <div class='links'>
? ? ? ? ? ? ? ? <div class = "login button" style = "cursor: pointer"
? ? ? ? ? ? ? ? ? ? ?onclick = "location.href = '/showLoginPage'">Login</div>
? ? ? ? ? ? ? ? ?<div class = "logout button" style = "cursor: pointer"
? ? ? ? ? ? ? ? ? ? ?onclick = "location.href = '/logout'">Logout</div>
? ? ? ? </div>
? ? ? ? <div class="line-break"></div>
? ? ? ? <div class = "user-info">
? ? ? ? ? ? <div class = "balance">
? ? ? ? ? ? ? ? Balance: $100
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class = "busket">
? ? ? ? ? ? ? ? Busket: $0
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</div>
您只需將最后一個塊右對齊:)
肥皂起泡泡
TA貢獻(xiàn)1829條經(jīng)驗 獲得超6個贊
在你的 html 中試試這個。
<div class='menu-container'>
<div class='menu'>
<div class='date'>Aug 14, 2016</div>
<div class="circle">
<img class="menu-logo" width = 150 src=
'${pageContext.request.contextPath}/resources/img/autoparts_logo10.png'/>
</div>
<div class="line-break"></div>
<div class='new-div'>
<div class='links'>
<div class = "login button" style = "cursor: pointer" onclick = "location.href = '/showLoginPage'">Login</div>
<div class = "logout button" style = "cursor: pointer" onclick = "location.href = '/logout'">Logout</div>
</div>
<div class = "user-info">
<span class = "balance">
Balance: $100
</span>
<span class = "busket">
Busket: $0
</span>
</div>
</div>
</div>
在你的 CSS 中：
.links {
border: 1px solid black;
}
.links .button {
border: 1px solid white;
padding: 6px;
text-align: center;
margin: 20px;
}
.line-break {
display: flex;
}
.menu-container {
color: #fff;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-content: space-between;
flex: 1 0 auto;
background-color: red;
width: 100%;
flex-flow: row wrap;
}
.menu {
width: 900px;
display: flex;
justify-content: space-between;
align-items: center;
}
.links {
display: flex;
justify-content: space-around;
border:1px solid black;
}
- 2 回答
- 0 關(guān)注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消