flexbox：如何在同一行中向左對齊1 div和向右對齊1 div
[英]flexbox: how to align 1 div to left and 1 div to right in the same line
問題描述
我在頂部有div topbar和div菜單，在topbar下有div內容，內容在網站的左側。 我正在嘗試向內容添加div側邊欄。 我正在使用幾種方法仍找不到解決方案。 我認為有些代碼會阻塞該內容權，但會限制idk。 我使用紅色邊框來幫助我進行網站定位。
body { font-family: 'Abel', sans-serif; margin: 0 auto; background-color: #008000; } .flexbox-container { display: flex; flex-direction: column; height: 100vh; padding-bottom: 20px; border: 2px solid red; } .flexbox-container div.topbar { height: 50px; text-align: center; font-size: 110%; font-family: 'Montserrat', sans-serif; border: 2px solid red; } .flexbox-container div.menu { height: 20px; background-color: #228B22; text-align: center; font-family: 'Montserrat', sans-serif; word-spacing: 20px; letter-spacing: 1px;' border: 2px solid red; } a:link, a:visited { text-decoration: none; color: #010f00; } a:hover { color: gray; } li { display: inline-block; padding-left: 15px; padding-right: 30px; border-right: solid 1px black; list-style-type: none; } li:first-child { padding-left: 30px; padding-right: 30px; border-left: solid 1px black; } .flexbox-container div.menu p { margin: 0; color: yellow; border: 2px solid red; } .flexbox-container div.content { margin-top: 25px; background-color: #228B22; height: 550px; text-align: center; width: 60%; border: 2px solid red; } .flexbox-container div.sidebar { margin-top: 25px; background-color: #228B22; text-align: center; height: 550px; width: 10%; border: 2px solid red; float: right; }
<!DISCODE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Piotr Nowak - Portfolio</title> <meta name="description" content="piotr nowak, programista backendowy freelancer" /> <meta name="keywords" content="programista, backend, freelancer, portfolio, web" /> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> </head> <body> <div class="flexbox-container"> <header> <div class="topbar"> <h1><a href="index.html">ZlotyKot Trafika</a></h1> </div> </header> <nav> <div class="menu"> <ul> <li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li> <li><a href="oferta.html" alt="_blank">Oferta</a></li> <li><a href="nowosci.html" alt="_blank">Nowości</a></li> <li><a href="kurier.html" alt="_blank">Kurier</a></li> <li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li> <li><a href="kontakt.html" alt="_blank">Kontakt</a></li> </ul> </div> </nav> <main> <div class="content"> <h1>Lorem ipsum. </h1> <br> </br> <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. </div> </main> <div class="sidebar"> </div> </div> </body> </html>
2 個解決方案
解決方案1
0 2019-03-07 12:11:29
這是你想要的嗎？
body { font-family: 'Abel', sans-serif; margin: 0 auto; background-color: #008000; } .flexbox-container { display: flex; flex-direction: row; height: 100vh; padding-bottom: 20px; border: 2px solid red; } .flexbox-container div.topbar { height: 50px; text-align: center; font-size: 110%; font-family: 'Montserrat', sans-serif; border: 2px solid red; } .flexbox-container div.menu { height: 20px; background-color: #228B22; text-align: center; font-family: 'Montserrat', sans-serif; word-spacing: 20px; letter-spacing: 1px;' border: 2px solid red; } a:link, a:visited { text-decoration: none; color: #010f00; } a:hover { color: gray; } li { display: inline-block; padding-left: 15px; padding-right: 30px; border-right: solid 1px black; list-style-type: none; } li:first-child { padding-left: 30px; padding-right: 30px; border-left: solid 1px black; } .flexbox-container div.menu p { margin: 0; color: yellow; border: 2px solid red; } .flexbox-container div.content { margin-top: 25px; background-color: #228B22; height: 550px; text-align: center; width: 60%; border: 2px solid red; } .flexbox-container div.sidebar { margin-top: 25px; background-color: #228B22; text-align: center; height: 550px; width: 10%; border: 2px solid red; float: right; }
<!DISCODE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Piotr Nowak - Portfolio</title> <meta name="description" content="piotr nowak, programista backendowy freelancer" /> <meta name="keywords" content="programista, backend, freelancer, portfolio, web" /> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> </head> <body> <div class="flexbox-container"> <header> <div class="topbar"> <h1><a href="index.html">ZlotyKot Trafika</a></h1> </div> </header> <nav> <div class="menu"> <ul> <li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li> <li><a href="oferta.html" alt="_blank">Oferta</a></li> <li><a href="nowosci.html" alt="_blank">Nowości</a></li> <li><a href="kurier.html" alt="_blank">Kurier</a></li> <li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li> <li><a href="kontakt.html" alt="_blank">Kontakt</a></li> </ul> </div> </nav> <main> <div class="content"> <h1>Lorem ipsum. </h1> <br> </br> <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. </div> </main> <div class="sidebar"> </div> </div> </body> </html>
解決方案2
0 2019-03-07 12:23:32
我將sidebar放到main並給main{ display:flex}也刪除了您給定的所有靜態高度。 謝謝
body { font-family: 'Abel', sans-serif; margin: 0 auto; background-color: #008000; } main{display: flex} .flexbox-container { display: flex; flex-direction: column; padding-bottom: 20px; border: 2px solid red; } .flexbox-container div.topbar { text-align: center; font-size: 110%; font-family: 'Montserrat', sans-serif; border: 2px solid red; } .flexbox-container div.menu { background-color: #228B22; text-align: center; font-family: 'Montserrat', sans-serif; word-spacing: 20px; letter-spacing: 1px;' border: 2px solid red; } a:link, a:visited { text-decoration: none; color: #010f00; } a:hover { color: gray; } li { display: inline-block; padding-left: 15px; padding-right: 30px; border-right: solid 1px black; list-style-type: none; } li:first-child { padding-left: 30px; padding-right: 30px; border-left: solid 1px black; } .flexbox-container div.menu p { margin: 0; color: yellow; border: 2px solid red; } .flexbox-container div.content { margin-top: 25px; background-color: #228B22; text-align: center; width: 60%; border: 2px solid red; } .flexbox-container div.sidebar { margin-top: 25px; background-color: #228B22; text-align: center; width: 10%; border: 2px solid red; float: right; }
<!DISCODE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Piotr Nowak - Portfolio</title> <meta name="description" content="piotr nowak, programista backendowy freelancer" /> <meta name="keywords" content="programista, backend, freelancer, portfolio, web" /> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> </head> <body> <div class="flexbox-container"> <header> <div class="topbar"> <h1><a href="index.html">ZlotyKot Trafika</a></h1> </div> </header> <nav> <div class="menu"> <ul> <li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li> <li><a href="oferta.html" alt="_blank">Oferta</a></li> <li><a href="nowosci.html" alt="_blank">Nowości</a></li> <li><a href="kurier.html" alt="_blank">Kurier</a></li> <li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li> <li><a href="kontakt.html" alt="_blank">Kontakt</a></li> </ul> </div> </nav> <main> <div class="content"> <h1>Lorem ipsum. </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat. <br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat.</p><p> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. </p> </div> <div class="sidebar"> </div> </main> </div> </body> </html>
如何使用 flexbox 右對齊 div 內的文本以獲取多行內容
[英]How to right align text inside a div for mutiline content using flexbox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.