Как выровнять таблицу и div на одной строке?

Question

Я пытаюсь выровнять таблицу из 6 строк, занимающих 75% горизонтального пространства рядом с 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>

Answer 1

Если вы плаваете таблицу слева вы приблизитесь к тому, что вы хотите. Вам также нужно будет иметь дело с границей, которую вы разместили в div, так как она добавляет ширину в div. Вы можете либо указать браузеру включить границу в вычисление ширины, либо удалить границу.

E.g.

table { 
    float : left; 
} 

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

Демо: https://jsfiddle.net/769k6zmd/2/

Если таблица выше, чем DIV справа вы должны добавить overflow:auto в родительский DIV, потому что плавал таблица будет переливаться родительский DIV.

Информация о box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

Вы могли бы попытаться не сделать 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>

Answer 3

Вы можете добавить таблицу внутри DIV (скажем div1) и установите ширину, если деление до 75%, а ширина, если таблицы на 100%. Для div (скажем, div2), который должен плавать в правую сторону div1, установите ширину менее 25%, потому что отступы, заданные для внешнего div. для обоих div1 и div2 установите значение float влево. Вы можете увидеть ниже код

<!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>