展開div以填充剩餘寬度

時間 2020-01-16

標籤展開 div 填充剩餘寬度欄目 CSS 简体版

原文原文鏈接

我想要一個兩列的div佈局，其中每一個能夠具備可變的寬度，例如 css

div { float: left; } .second { background: #ccc; }

<div>Tree</div> <div class="second">View</div>

我但願'view'div擴展到'tree'div填充所需空間後可用的整個寬度。目前，個人「視圖」 div已調整爲包含它的內容的大小，若是兩個div都佔據整個高度，那也會很好 html

不重複免責聲明： 瀏覽器

設置float：left時，將div擴展爲最大寬度，由於左側的寬度固定。服務器

幫助div-使div適合剩餘寬度，由於我須要將兩列都向左對齊框架

#1樓

我不肯定這是不是您所指望的答案，可是爲何不將Tree的寬度設置爲「 auto」，而將「 View」的寬度設置爲100％？ ide

#2樓

這將是與表可有可無的事情，而且與CSS很難（若是不是不可能的話，至少在跨瀏覽器的意義上）很難作到。佈局

若是兩列的寬度都是固定的，這將很容易。 spa

若是其中一列是固定寬度，這將稍微困難一些，但徹底可行。 code

因爲兩列的寬度均可變，恕我直言，您只須要使用兩列表格便可。 htm

#3樓

若是兩個寬度都是可變長度，爲何不經過腳本或服務器端計算寬度呢？

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

#4樓

看一下可用的CSS佈局框架。我建議使用Simpl或稍微複雜一些的Blueprint框架。

若是您使用的是Simpl（僅導入一個simpl.css文件），則能夠執行如下操做：

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

，用於50-50版面，或：

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

，適合25-75的人。

就這麼簡單。

#5樓

在這裏，這可能會有所幫助...

<html> <head> <style type="text/css"> div.box { background: #EEE; height: 100px; width: 500px; } div.left { background: #999; float: left; height: 100%; width: auto; } div.right { background: #666; height: 100%; } div.clear { clear: both; height: 1px; overflow: hidden; font-size: 0pt; margin-top: -1px; } </style> </head> <body> <div class="box"> <div class="left">Tree</div> <div class="right">View</div> <div class="clear" /> </div> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。