如何並排放置兩個 div。 還有一個在表格底部使用 css？
[英]How to place two div's side by side. and one at the bottom in table using css?
問題描述
如何並排放置兩個 div。 底部的一個使用 css？
有沒有辦法使用顯示或 position 屬性？
<table class="responsive_table Append_row"> <tr class="list_row bg_div"> <td> <p class="m-0 PSS_text">1_TIME</p> <div class="d-flex gap-2"> <div class="empty_div"></div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault3" id="flexRadioDefault1" checked /> <label class="form-check-label" for="flexRadioDefault1"> ON </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault4" id="flexRadioDefault2" /> <label class="form-check-label" for="flexRadioDefault2"> YES </label> </div> </div> </td> <br/> <td class="dropdown_list"> <select class="form-select select_aro select_options" id="choice" style="width:150%; margin-bottom: 20px;"> <option value="" disabled selected> HH:MM/MM±Dusk/MM±Dawn </option> <option>H1</option> <option>H2</option> <option>H3</option> <option>H4</option> </select> </td> </tr> </table>
如何並排放置兩個 div。 底部的一個使用 css？
有沒有辦法使用顯示或 position 屬性？
2 個解決方案
解決方案1
0 2022-08-17 17:20:01
你可以使用彈性盒子。 查看您的代碼，我不知道您要重新定位哪些div元素。 這是您想要實現的布局示例。
.flex-container { display: flex; width: 500px; }.boxA { flex: 0 0 50%; background: grey; border: 1px solid black; }.boxB { margin-top: 10px; height: 50px; width: 500px; background: grey; border: 1px solid black; }
<div class="flex-container"> <div class="boxA">box1</div> <div class="boxA">box2</div> </div> <div class="boxB">box3</div>
解決方案2
0 2022-08-17 17:25:47
這是靈活的方法。
<html>
<div class="container">
<div class="side-by-side">
<div>Left</div>
<div>Right</div>
</div>
<div class="bottom">Bottom</div>
</div>
</html>
Css 是
div{
width:100px;
background-color:red;
border: 2px solid black;
}
.container{
display:flex;
flex-direction:column;
}
.side-by-side{
display:flex;
}
您也可以使用網格來實現這一點。
如何使用css3並排放置兩個div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.