Question

+-------------------------------------------------------------------------------+
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** PPPPPPPPPPPPPPPPPPPPPPPPPPP                                    |
|***************                                                                |
|TTTTTTTTTTTTTTTTTTTTTTTT                                                       |
|                                                                               |
|-------------------------------------------------------------------------------+

对不起这里的草图。我试图附上一个屏幕截图，但我无法让它显示出来。（如果不能解释的话，我会稍后在另一台计算机上尝试修复它）

编辑：这有助于形象化...... http://jsfiddle.net/T3y6E/embedded/result/

我正在处理的个人网页上有<div>。 *表示图像放置。 “H”代表标题放置。 “T”代表一个口号。我试图移动标语，使其直接位于标题下方（希望的位置由“P”代表）

以下是该部分页面的HTML：

<div class="logo-image">
      <img src="~/Images/Atlas.png" height="125" width="150" alt="Atlas Logo" />
      <img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
      <div style="color:#FFF">*A southpaw's approach to bowling*</div>
</div>

这是影响它的CSS：

.logo-image {
    float: left;
    margin: 0px 20px 0px 0px;
}

Answer 1

您正在寻找的效果是float。它必须应用于您想要浮动的元素，在本例中是第一个图像。元素（带浮动）必须放在你希望它浮动的元素之前，在你的情况下是标题和标语。

我用你的代码创建了一个小提琴来展示这个概念：http://jsfiddle.net/3xV5Z/1/
提醒一下：你的口号太大了。如果您不管理图像宽度，Float将无法正常工作。

Answer 2

我的回答与LcSalazar非常相似。它使用你的css。

<div>
    <span class="logo-image">
        <img src="http://placekitten.com/150/125" height="125" width="150" alt="Atlas Logo" />
    </span>
    <img style="vertical-align:top" src="http://placekitten.com/820/85" height="85" width="820" alt="Atlas Logo" />
    <div>*A southpaw's approach to bowling*</div>
</div>

网页上的CSS放置

2 个答案: