0

我在另一个 div 中有三个 div。

<div id="parentDiv" style="float:right;">
   <div id="childDiv1" style="float:left;">
       <b>Text1</b>
   </div>
   <div id="childDiv2" style="float:left;">
       <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   </div>
   <div id="childDiv3" style="float:left;">
       <input type='checkbox' />
   </div>
<div>

我需要它们并排出现，所以我将它们设置为float:left.

问题是它们看起来像这样......

布局图像不正确

...文本在顶部垂直对齐。我需要它在中间。

注意我发现了一篇关于一个非常相似的问题的帖子，但似乎浮动会导致它失败。

4

5 回答 5

1

使用以下代码：（我建议您尽可能避免使用表格）

<div id="parentDiv" style="float:right;">
   <div id="childDiv1" style="float:left; line-height: 42px;">
       <b>Text1</b>
   </div>
   <div id="childDiv2" style="float:left;">
       <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   </div>
   <div id="childDiv3" style="float:left; line-height: 42px;">
       <input type='checkbox' />
   </div>
<div>
于 2013-04-23T13:01:52.453 回答
1

您可以使用表格轻松实现这一目标

       <table>
            <tr>
                <td> <b>Text1</b></td>
                <td><img src="smiley.gif" alt="Smiley face" height="42" width="42"></td>
                <td><input type='checkbox' /></td>
            </tr>
        </table>

或者你真的需要坚持使用 div 吗？希望这可以帮助。:)

于 2013-04-23T12:59:32.410 回答
1

如果你真的需要 DIV，你可以使用“ display: inline; ”来代替float。然后垂直对齐：中间；使元素居中。

    <div id="parentDiv" style=" ">
       <div id="childDiv1" style="display: inline-block; vertical-align: middle;">
           <b>Text1</b>
       </div>
       <div id="childDiv2" style="display: inline-block; vertical-align: middle;">
           <img src="smiley.gif" alt="Smiley face" height="42" width="42">
       </div>
       <div id="childDiv3" style="display: inline-block; vertical-align: middle;">
           <input type='checkbox' />
       </div>
    </div>

希望这可以帮助。

于 2013-04-23T13:04:33.593 回答
0

为了让它们并排出现，您不需要它们浮动，只需将它们设置为原样即可。至于图像，只需为其添加一个 CSS 属性：vertical-align:middle它应该将它与文本的中间对齐。

于 2013-04-23T12:48:41.503 回答
-1

所有 'div' 内所有元素的 'line-height' 必须相等

于 2013-04-23T12:55:22.873 回答