Question

我有以下HTML：

    <div class="blueBackground" style="height:350px; width:550px">

    <div class="txtSmallGrey fl" style="height:20px; margin:15px; clear:left;">
        <div style="width:150px"><%= oUtils.GetContentText("Collect_Config_Expense_return") %> </div>
    </div>

    <div class="txtSmallGrey fl" style="height:20px; margin:15px; clear:left;">
        <div style="width:150px; float:left"><%= oUtils.GetContentText("Collect_Config_Wrong_Garment_Sounds") %> </div><select id="WrongGarmentSelector" class="fl" style="float:right; width:150px;"></select>
    </div>

    <div class="txtSmallGrey fl" style="height:20px; margin:15px; clear:left;">
        <div style="width:150px; float:left"><%= oUtils.GetContentText("Collect_Config_Out_Of_Credit_Sounds") %> </div><select id="OutOFCreditSelector" class="fl" style="float:right; width:150px;"></select>
    </div>

    </div>

我的目标是创建一个蓝色框，然后创建一些行。上述HTML中的第二行和第三行用于文本和文本右侧的“选择”。

我已经实现了这一点，它们看起来像预期的那样。我的问题是我现在想要减小蓝色背景的宽度，因此它会在选择器的左边留下一个小间隙然后结束。

从我所看到的：

蓝色背景的宽度为550像素;
文本div的宽度为150像素。
选择器的宽度为150像素。
内部div上有15 px的余量。
bluebackground div没有余量。
选择器没有边距。

这会将div和selector的总宽度设为：

150 + 150 + 30 = 330 px

但是，如果我将bluebackground宽度设置为500px或更小，它会将选择器移动到div下方。

这让我觉得我没有正确计算出边距。我尝试使用DOM资源管理器进行检查，但无法看到边距。

我错过了什么？

Answer 1

如果我理解正确，你有3个div，每个div都有一个边距。

所以正确的计算是：150 + 30 + 150 + 30 + 150 + 30 = 450 + 90 = 540 px？

告诉我你是否不理解这个计算。

编辑：当你有保证金：15px时，你有保证金左：15px和保证金左：15px

HTML div和选择间距

1 个答案: