在同一高度的100％寬度表格的左側放置div

我想在表格的左側放置一個單選按鈕（或任何其他元素），但使按鈕垂直居中。如果我是新的表格都將是相同的大小，我可以使用相對定位。但是，我不知道這一點。 This jsfiddle是接近我需要的，但是，左邊的div需要是相同的高度（垂直對齊），它也需要駐留在邊緣。這jsfiddle接近我所尋找的，但似乎有點hacky，不允許不同高度的表。我可以使用不帶javascript的HTML/CSS來完成此操作嗎？在同一高度的100％寬度表格的左側放置div

這裏是我期待在使用做到這一點的HTML：

<div class="item"> 
    <div class="one"><input type="radio" name="group"/></div> 
    <div class="two"> 
    <table> 
     <tr><td>Data</td><td>More Data</td></tr> 
     <tr><td>another</td><td>row</td></tr> 
     <tr><td>of ...</td><td>you guessed it</td></tr> 
     <tr><td>just</td><td>more data</td></tr> 
    </table> 
    </div> 
</div>

和CSS：

table {border-collapse:collapse;width:100%;} 
td {border:1px solid black;padding:10px;} 
.item {margin:10px; padding:10px; background:red;} 
.two {background:blue;} 

/* customization */ 
.one {background:yellow;text-align:center;width:20px;display:table-cell;vertical-align:middle;} 
.two {margin-left:20px;} 

/* hacky */ 
.one {height:50px;position:relative;top:55px;} 
.two {margin-top:-50px;}

來源

2013-01-24 michaellindahl

垂直對齊只能在表格單元格或內聯元素之間。因此，無論使用表一行和兩個單元，爲.one和.two或使用CSS的div的轉換成表格單元格：

.one, .two {display:table-cell;}

Demo（在Firefox只測試了，沒有其他的瀏覽器希望它能正常工作）

來源

2013-01-24 06:04:25 SinistraD

您可以將display：table-row添加到.item，但是會再次丟失填充。您可以添加邊框間距的填充，但是.one和.two之間會有空格。我推薦的是停止使用這些顯示內容，並使用正確的HTML標記：在需要表格的地方使用表格。 – SinistraD

我知道，嵌套表是討厭的（雙關意圖），但無論哪種方式，您都在使用表格，只是現在您的閱讀標記更短但更難閱讀（更困難，因爲一半的表示法隱藏在CSS中）。 – SinistraD

我相信你所說的工作解決方案，因爲它使用'display：table-row;'不是最好的方法，因爲它不是正確的HTML標記。如果這是真的，那麼完成這個任務的正確的HTML標記是什麼？ – michaellindahl

在同一高度的100％寬度表格的左側放置div

回答

相關問題