如何在同一行上對齊表格和div？

我正在試圖對齊一個佔據水平空間75％旁邊的6行的表格，右邊是文本。如何在同一行上對齊表格和div？

但是，下面的html代碼導致它們在另一個之上。

我試圖玩內聯塊等，但無論我做什麼，它都沒有把它放在旁邊。

我在做什麼錯？整個工作片斷如下：

<div id="ResultDetails" style="border:solid; border-width:2px; overflow:auto; border-color:lightgray; padding-left:12px;padding-right:12px; padding-top:12px;padding-bottom: 12px;margin:10px"> 
 
<table style="width:80%; display: inline-block; vertical-align: top; "> 
 
    <tr> 
 
     <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width:18%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i></td> 
 
     <td style="width:20%; font-size:large; padding-left: 6px"><i>Result</i></td> 
 
     <td style="width:20%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i></td> 
 
     <td style="width:20%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="BorderBottom">{{vehicle}}</td> 
 
     <td class="BorderBottom">{{vehicle_result}}</td> 
 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="BorderBottom">{{vehicle}}</td> 
 
     <td class="BorderBottom">{{vehicle_result}}</td> 
 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="BorderBottom">{{vehicle}}</td> 
 
     <td class="BorderBottom">{{vehicle_result}}</td> 
 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="BorderBottom">{{vehicle}}</td> 
 
     <td class="BorderBottom">{{vehicle_result}}</td> 
 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="BorderBottom">{{vehicle}}</td> 
 
     <td class="BorderBottom">{{vehicle_result}}</td> 
 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
    </tr> 
 
</table> 
 
<table style="width:20%; display: inline-block; vertical-align: top; border-left: dashed"> 
 
    <tr> </tr> 
 
    <tr> 
 
     <td style="text-align: center">Positive Performance Stats </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="text-align: center"> Cars: 91% </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="text-align: center"> Buses: 93% </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="text-align: center">Planes: 38% </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="text-align: center">Minivans: 50% </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="text-align: center"> 
 
      Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum. 
 
      Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum. 
 
     </td> 
 
    </tr> 
 
</table> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-09-01 user3079275

如果浮表的左側會接近你想要什麼。你還需要處理你放在div上的邊框，因爲它爲div增加了寬度。您可以告訴瀏覽器在寬度計算中包含邊框或刪除邊框。

E.g.

table { 
    float : left; 
} 

#PPV { 
    box-sizing : border-box; 
}

演示：https://jsfiddle.net/769k6zmd/2/

如果表比格到你需要添加overflow:auto父DIV，因爲浮動表溢出父DIV右高。

上box-sizing信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

來源

2016-09-01 17:41:59 Jasper

這一個看起來與我所看到的（甚至在它的jsfiddle彼此的頂部顯示） – user3079275

@ user3079275嘗試取出虛線邊框。適用於最新的Chrome/IE/Firefox。 – Jasper

@ user3079275其實，如果你的瀏覽器不夠寬，表格會比寬度屬性更寬，因爲沒有溢出剪輯設置。這將推動它下面的div。 – Jasper

你可以儘量不作出div一個div裏面，但改變divs到li，讓他們不會在彼此內部。像這樣

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li id="ResultDetails" style="display: inline-block; border:solid; border-width:2px; border-color:lightgray; padding-left:12px;padding-right:12px; padding-top:12px;padding-bottom: 12px;margin:0px"> 
 
     <table style="width:75%"> 
 
     <tr> 
 
      <td style="font-family:Calibri; font-size:large;  color:midnightblue; text-align:left"><b>RESULT DETAILS</b> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td style="width:25%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i> 
 
      </td> 
 
      <td style="width:25%; font-size:large; padding-left: 6px"><i>Result</i> 
 
      </td> 
 
      <td style="width:25%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i> 
 
      </td> 
 
      <td style="width:25%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td class="BorderBottom">{{vehicle}}</td> 
 
      <td class="BorderBottom">{{vehicle_result}}</td> 
 
      <td class="BorderBottom">{{vehicle_testing}}</td> 
 
      <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td class="BorderBottom">{{vehicle}}</td> 
 
      <td class="BorderBottom">{{vehicle_result}}</td> 
 
      <td class="BorderBottom">{{vehicle_testing}}</td> 
 
      <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td class="BorderBottom">{{vehicle}}</td> 
 
      <td class="BorderBottom">{{vehicle_result}}</td> 
 
      <td class="BorderBottom">{{vehicle_testing}}</td> 
 
      <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td class="BorderBottom">{{vehicle}}</td> 
 
      <td class="BorderBottom">{{vehicle_result}}</td> 
 
      <td class="BorderBottom">{{vehicle_testing}}</td> 
 
      <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="BorderBottom">{{vehicle}}</td> 
 
      <td class="BorderBottom">{{vehicle_result}}</td> 
 
      <td class="BorderBottom">{{vehicle_testing}}</td> 
 
      <td class="BorderBottom">{{vehicle_pollution}}</td> 
 
     </tr> 
 
     </table> 
 
    </li> 
 
    <li id="PPV" style="width:25%; border-left: dashed; display: inline-block; align-content: center;"> 
 
     Positive Performance Stats 
 
     <br>Cars: 91% 
 
     <br>Buses: 93% 
 
     <br>Planes: 38% 
 
     <br>Minivans: 50% 
 
     <br>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum, lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum 
 
    </li> 
 
    </ul>

來源

2016-09-01 17:49:35

您可以添加表一個div（說DIV1）內設置寬度如果格到75％，寬度如果表爲100％。對於需要浮動到div1右側的div（比如說div2），將寬度設置爲小於25％，因爲填充給了外部div。對於div1和div2都將float屬性設置爲left。你可以看到下面的代碼

<!DOCTYPE html> 
<html lang="en"><head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
<div id="ResultDetails" style="border:solid;border-width: 2px;border-color:lightgray;padding-left: 1%;padding-right: 1%;padding-top: 1%;padding-bottom: 1%;margin: 1%;float: left;width: 96%;"> 
    <div style=" 
    float: left; 
    width: 75%; 
"><table style="width:100%;"> 
    <tbody><tr> 
     <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td> 
    </tr> 
    <tr> 
     <td style="width:25%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i></td> 
     <td style="width:25%; font-size:large; padding-left: 6px"><i>Result</i></td> 
     <td style="width:25%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i></td> 
     <td style="width:25%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i></td> 
    </tr> 

    <tr> 
     <td class="BorderBottom">{{vehicle}}</td> 
     <td class="BorderBottom">{{vehicle_result}}</td> 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
    </tr> 

    <tr> 
     <td class="BorderBottom">{{vehicle}}</td> 
     <td class="BorderBottom">{{vehicle_result}}</td> 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
    </tr> 

    <tr> 
     <td class="BorderBottom">{{vehicle}}</td> 
     <td class="BorderBottom">{{vehicle_result}}</td> 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
    </tr> 

    <tr> 
     <td class="BorderBottom">{{vehicle}}</td> 
     <td class="BorderBottom">{{vehicle_result}}</td> 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
    </tr> 
    <tr> 
     <td class="BorderBottom">{{vehicle}}</td> 
     <td class="BorderBottom">{{vehicle_result}}</td> 
     <td class="BorderBottom">{{vehicle_testing}}</td> 
     <td class="BorderBottom">{{vehicle_pollution}}</td> 
    </tr> 
    </tbody></table></div> 
<div id="PPV" style="width: 24%;border-left: dashed;display: inline-block;align-content: center;float: left;"> 
    Positive Performance Stats <br> 
    Cars: 91% <br> 
    Buses: 93%<br> 
    Planes: 38%<br> 
    Minivans: 50%<br> 
    Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum, lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum 
</div> 
</div> 


</body></html>

來源

2016-09-01 18:29:04 Pranav

如何在同一行上對齊表格和div？

回答

相關問題