如何并排放置两个 div。 还有一个在表格底部使用 css？
[英]How to place two div's side by side. and one at the bottom in table using css?
问题描述
How to place two div's side by side.
如何并排放置两个 div。 and one at the bottom using css?底部的一个使用 css？
Is there any way uisng display or the position property?有没有办法使用显示或 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>
How to place two div's side by side.如何并排放置两个 div。 and one at the bottom using css?底部的一个使用 css？
Is there any way uisng display or the position property?有没有办法使用显示或 position 属性？
2 个解决方案
解决方案1
0 2022-08-17 17:20:01
You can use flex box.你可以使用弹性盒子。 Looking at your code I don't know which div elements you want to reposition.查看您的代码，我不知道您要重新定位哪些div元素。 Here's an example of the layout you were wanting to achieve.这是您想要实现的布局示例。
.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
This is the flex approach.这是灵活的方法。
<html>
<div class="container">
<div class="side-by-side">
<div>Left</div>
<div>Right</div>
</div>
<div class="bottom">Bottom</div>
</div>
</html>
Css is Css 是
div{
width:100px;
background-color:red;
border: 2px solid black;
}
.container{
display:flex;
flex-direction:column;
}
.side-by-side{
display:flex;
}
you can also achieve this using grid.您也可以使用网格来实现这一点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.