Rumah >hujung hadapan web >html tutorial >table-cell完成左侧定宽,右侧定宽及左右定宽等布局
<span style="color: #000000;"> .left{ width: 300px; height: 500px; border: 1px solid; </span><span style="color: #0000ff;">float</span><span style="color: #000000;">: left; } .right{ width: 10000px; height: 500px; display: table</span>-<span style="color: #000000;">cell; border: 1px solid; } </span> <div class="left"></div> <div class="right"><span style="color: #000000;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint. </span></div>
效果如下:
(调整窗口大小,来测试右侧是否根据窗口大小改变)
<span style="color: #008080;"> 1</span> <style> <span style="color: #008080;"> 2 <span style="color: #000000;"> .right{ <span style="color: #008080;"> 3 <span style="color: #000000;"> width: 200px; <span style="color: #008080;"> 4 <span style="color: #000000;"> height: 500px; <span style="color: #008080;"> 5 <span style="color: #000000;"> border: 1px solid; <span style="color: #008080;"> 6 display: table-<span style="color: #000000;">cell; <span style="color: #008080;"> 7 <span style="color: #000000;"> } <span style="color: #008080;"> 8 <span style="color: #000000;"> .left{ <span style="color: #008080;"> 9 <span style="color: #000000;"> height: 500px; <span style="color: #008080;">10 <span style="color: #000000;"> border: 1px solid; <span style="color: #008080;">11 display: table-<span style="color: #000000;">cell; <span style="color: #008080;">12 <span style="color: #000000;"> } <span style="color: #008080;">13 <span style="color: #000000;"> .parent{ <span style="color: #008080;">14 <span style="color: #000000;"> display: table; <span style="color: #008080;">15 table-<span style="color: #000000;">layout: fixed; <span style="color: #008080;">16 width: 100%<span style="color: #000000;">; <span style="color: #008080;">17 <span style="color: #000000;"> } <span style="color: #008080;">18 </style> <span style="color: #008080;">19</span> <span style="color: #008080;">20</span> <div class="parent"> <span style="color: #008080;">21</span> <div class="left"> <span style="color: #008080;">22</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, <span style="color: #0000ff;">in</span><span style="color: #000000;"> inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam. </span><span style="color: #008080;">23</span> </div> <span style="color: #008080;">24</span> <div class="right"></div> <span style="color: #008080;">25</span> </div>
效果如下:
与左侧定宽稍有不同,虽然只是定宽的位置换了,但是不能直接使用浮动像左侧定宽那种方式完成。
<style><span style="color: #000000;"> .parent{ display: table; table-<span style="color: #000000;">layout: fixed; width: 100%<span style="color: #000000;">; } div{ border: 1px solid; } .left,.right,.center{ display: table-<span style="color: #000000;">cell; } .left{ width: 100px; height: 200px; } .right{ width: 100px; height: 200px; } </style> <div class="parent"> <div class="left"></div> <div class="center"> <span style="color: #000000;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde, <br> ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae</span>! </div> <div class="right"></div> </div>
效果如下: