Question

我正在从整个网站中取出表格，然后将它们切换到CSS Div。

这是我正在尝试的第一个链接： http://www.torelloengineers.com/legal_investigations.html

问题是右边的内容被放在左边的图片下方，而不是紧挨着它。

我在我的CSS文件中创建了这个：表格单元格的容器，行，左，右和中间。我无法在此处准确粘贴，因为文本框不允许格式化代码。

<div id="row">
    <div id="left">
        <h4><img src="picts/torello-safety-design.jpg" width="400" height="301"></h4>
    </div>
    <div id="right">
        <h4>Lacking Good Safety Design - Missing Guardrail.  Plainville, CT</h4>
        <p>While returning to her parked vehicle after using an ATM.... </p>
    </div>
</div>

我将主页上左右所需的内容“潜入”我想要的内容，但正确的内容不会与左侧对齐。

Answer 1

我没有看到其中包含ID #left和#right的CSS文件。 ids #left和#right是否向左和/或向右浮动？

#left {
    float: left;
}
#right {
    float: right;
}

您可能也希望将这些更改为类，只是为了更容易重用它们。：）

Answer 2

尝试position:absolute或position:relative

Answer 3

<div id="right">被格式化为表格单元格。检查文本的垂直对齐方式 - vertical-align:baseline。我个人会删除表格单元格格式并使用常规div。

Answer 4

这样做：

#left {width: 50%; display: inline-block; vertical-align: top;}
#right {width: 50%; display: inline-block; vertical-align: top;}

根据您的喜好调整宽度。浮动允许内容环绕它们，所以它们也是一个选项。

当你在那里时，改变

“以下是我们为律师做的过去工作的一些例子：”

到

“以下是我们为律师所做的过去工作的一些例子：”

将表转换为div / CSS时遇到麻烦

4 个答案: