使用動態寬度和100％寬度嵌套表格對齊兩個div

我試圖讓兩個div（使用動態寬度）並排排列在寬度爲100％的父級內;直到我碰到一個嵌套表格（也帶有100％）在其中一個div內運行時，這並不困難。使用動態寬度和100％寬度嵌套表格對齊兩個div

我想要什麼：
#parent寬度100％
內
#left造成內容#right汽車寬度填補空白從「＃「#right」
table 100％的寬度留下空隙上方左」

問題：
正如你可以在下面的例子中看到的，我可以得到div的在b並排，但我不能讓桌子成爲「#left」的100％;相反，它低於「#parent」。

代碼：

HTML

<div id="parent"> 

    <div id="right">RIGHT!</div> 

    <div id="left"> 
     <table> 
      <tr> 
       <th>Header</th> 
       <th>Also Header</th> 
      </tr> 
     </table> 
    </div> 

</div>

CSS

#parent { 
    width: 100%; 
    height: 300px; 
} 

#right { 
    float: right; 
    width: auto; 
    height: 100%; 
} 

#left { 
    width: 100%; 
    height: 100%; 
} 

table { 
    width: 100%; 
}

編輯
重播答案
我忘了提，我將使用@media屬性來更改內部#parent一切，當在一定寬度下的畫面。所以我想保持當前的html結構

來源

2012-09-11 Vinnie Cent

我曾經用CSS工作過一段時間。但是，首先，您應該在right代碼塊的頂部設置left div。 HTML和CSS進入順序（據我所知）

另一件事，你試圖實現的左邊塊將需要一些JavaScript的工作。您應該首先獲取表格的內容，並在加載時需要根據內容的大小調整left區塊的大小。

要做的一件好事是查看頁面加載的生命週期並查看哪個部分首先被渲染，基於此可以相應地調整它們的大小。

工作編輯：

我打了你的代碼，想通了這碼塊將提供「收縮到合適」的能力。

HTML：

<div id="parent"> 
    <div id="right">sdfdsfdsfdsfsdf</div> 
    <div id="left"> 
     <table> 
      <tr> 
       <th>Header</th> 
       <th>Also Header</th> 
      </tr> 
     </table> 
    </div> 
</div>

CSS：

#parent { 
    width: 100%; 
    height: 300px; 
    background: rgba(255, 0, 0, 0.1); 
} 

#right { 
    float:right; 
    width:auto; 
    height: 100%; 
    background: rgba(0, 0, 255, 0.1); 
    display:inline-block; 
    text-align:center; 
} 

#left { 
    height: 100%; 
    background: rgba(0, 255, 0, 0.1); 
    width:100%; 
} 

table { 
    width:300px; 
    background: rgba(255, 255, 0, 0.1); 
}

來源

2012-09-11 17:05:05 Steven

見編輯代碼工作的樣品。忽略我之前說過的話。 – Steven

'＃right'被認爲只與其中的內容一樣大。 –

對不起，我誤讀了左右部分。我現在更改了代碼。我只是改變了我以前的代碼中的左右行爲。嘗試一下，讓我知道。 – Steven

<table id="parent"> 
    <tr> 
    <td id="left"> 
     <table id="table"> 
      <tr> 
      <th>Header</th> 
      <th>Also Header</th> 
      </tr> 
     </table> 
     </td> 
    <td id="right">RIGHT!</td> 
    </tr> 
</table>

，改變你的表CSS來：

#table { 
    width: 100%; 
    background: rgba(255, 255, 0, 0.1); 
}

來源

2012-09-11 17:12:54 meub

我忘記提及當我將屏幕放在一定的寬度下時，我將使用@media屬性來更改'＃parent'內的所有內容。所以我想保留當前的html結構。 –

在CSS中刪除表格的寬度，包括jQuery的，然後包括此：

$(document).ready(function(){ 
    var new_width = $("#parent").width() - $("#right").width(); 

    $("table").first().css("width", new_width); 

});

來源

2012-09-11 17:44:42 meub

The OP write in an edit：

我恨張貼問題，不久後解決它，甚至試圖解決小時後問題發佈之前，但，我解決了它。我想......

CSS

#parent { 
    width: 100%; 
    height: 300px; 
    background: rgba(255, 0, 0, 0.1); 
} 

#right { 
    float: right; 
    width: auto; 
    height: 100%; 
    background: rgba(0, 0, 255, 0.1); 
} 

#left { 
    position: relative; 
    overflow: hidden; 
    /*width: 100%;*/ 
    height: 100%; 
    background: rgba(0, 255, 0, 0.1); 
} 

table { 
    width: 100%; 
    background: rgba(255, 255, 0, 0.5); 
}

來源

2017-09-27 06:48:14

使用動態寬度和100％寬度嵌套表格對齊兩個div

回答

相關問題