我的页面中有一个 HTML 表格,我试图用 div 和 CSS 替换它。基本上,它是一个 3x3 的表格,中间有可缩放的内容,固定大小的边缘和角落,背景中有图像,为所有内容提供漂亮的阴影效果。
我已经阅读了许多关于将 % 与像素混合的文章和条目,但它们似乎都没有我正在寻找的东西。
这是我到目前为止所拥有的:
<html>
<body>
<p>Text up here...</p>
<div style="height: 200px; background-color: red; ">
<div style="width: 80%; height: 100%;">
<div style="clear: both; height: 100%;">
<div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
<div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
</div>
</div>
</div>
<p>Text down here...</p>
</body>
</html>
如何将蓝色 div 放在黄色 div 旁边?我可能完全不在这儿了。我将不胜感激任何帮助。