我有两个表格和一个图像，我希望它们在使用 float 属性时排在一行中。 如何在缩小浏览器窗口时防止图像和右侧表格跳到其他元素下方？
<body>
<div>
<table class="datagrid">
<tr>
<th colspan="2">Test table one</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<table class="datagrid">
<tr>
<th colspan="2">Test table two</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<img style="float: left; height: 200px;" src="data:image/png;base64,..."/>
</div>
</body>
table.datagrid tr th
{
text-align: left;
padding: 5px 5px;
background: #ebebeb;
}
table.datagrid
{
float: left;
width: 30%;
margin-right: 15px;
}
最佳答案
您可以创建响应式布局并将每个 block 的宽度设置为 33%，为边距留出一些空间 (1%)。 首先，我会将图像包装在 div 包装器中
<div class="imagery"><img src=""/></div>
设置图像包装器的样式
.imagery {
float: left;
width: 33%;}
并确保图像适当缩放:
.imagery img {
max-width: 100%;
height: auto;
display: block;
然后我将表格宽度设置为 33%，边距设置为 1%
.datagrid {
float: left;
width: 33%;
margin-right: 0.5%;}
关于html - 具有 float 属性的图像不符合元素(css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26812826/