html - 网页上的 CSS 布局

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。它必须应用于您想要 float 的元素，在本例中是第一张图像。并且元素(带 float )必须放置在您希望它从中 float 的元素之前，在您的例子中是标题和标语。

我用你的代码创建了一个 fiddle 来展示这个概念:http://jsfiddle.net/3xV5Z/1/
提醒一下:你的slogan太大了。如果您不管理图像宽度， float 将无法很好地使用它。