我想将两个 div 并排放置。右侧 div 的宽度由其内容决定，应与容器 div 的右侧对齐。左侧 div 的宽度应跨越页面的其余部分。
我设法使用以下代码(显然是原始代码的最小化版本)做到了这一点:
<html>
<head>
<style>
#container {
border: 1px solid black;
display: table;
width: 1000px;
}
#left {
display: table-cell;
vertical-align: top;
width: 100%;
}
#right {
display: table-cell;
vertical-align: top;
}
#image {
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
blabla
</div>
<div id="right">
<div id="image">
</div>
</div>
</div>
</body>
</html>
在 chrome 和 firefox 中都能完美运行，但在 IE 中，#right div 显示在左侧下方。
想法是只有#container 和#image 具有显式设置的尺寸。所有其他维度都应该通过某种方式巧妙地对齐从那些维度中推断出来。 display: table-cell css 属性很好地实现了这一点，但似乎没有其他作用......
有人知道解决办法吗？已经有很多“将 div 彼此相邻放置”的问题，但所有解决方案似乎都取决于所有具有固定宽度的 div..
最佳答案
以这种方式更改 CSS:
#left {
float: left;
width: 50%;
padding: 0;
margin: 0;
}
#right {
float: right;
width: 50%;
padding: 0;
margin: 0;
}
如果您发现其中的问题，请告诉我们!
关于html - 使用 css table 将两个 div 并排放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12299890/