0

我一直在尝试将 3 个不同的元素放入 div 中，但遇到了问题。我似乎无法摆脱标题和段落之间的巨大空白。我使用了一个关于边距和填充的文档来解决这个问题，虽然我取得了一些进展，但仍有一些未解决的问题。

在此处输入图像描述

我的尝试：

<html>
    <header>
        <link rel="stylesheet" type="text/css" href="style2.css"></header>
    <body class="about">    
        <div class="content-wrapper">

            <img class="hk-img" src="hksquared.jpg" height= "400px" width="400px">

            <h1 class="text-header-content">Web Development. Software Development. E-commerce. Photograpy.</h1>

            <p class="text-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.<br><br><br>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
            </p>
        </div>


    </body>
</html>

CSS：

/*About page content*/
.content-wrapper{
  display: inline-block;
  width: 1000px;
  padding:0px;
  margin-top: 50px;
  margin-right: 100px;
  margin-left: 50px;
  position: fixed;
  border:2px solid black;
}

.text-header-content{
  display: inline;
  width: 400px;
  float: right;
  padding:0px;
  margin-top: 0px;
}

.text-content{
  display: inline;
  width: 400px;
  padding:0px;
  color: black;
  float: right;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
4

3 回答 3

1

为您的图像添加样式：

float:left;

看这里

于 2013-09-08T15:25:02.740 回答
0

您将不得不IMG向左浮动。我要做的是将文本放在另一个元素中并设置overflow: hidden;在该元素上。

jsFiddle Demo

HTML：

    <div class="content-wrapper">

        <img class="hk-img" src="hksquared.jpg" height= "400px" width="400px">

        <div class="text">

            <h1 class="text-header-content">Web Development. Software Development. E-commerce. Photograpy.</h1>

            <p class="text-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.<br><br><br>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

        </div>

    </div>

CSS：

.content-wrapper {
  /* Simple float containment: http://colinaarts.com/articles/float-containment/ */
  overflow: hidden;
  /* Your styles */
  display: inline-block;
  width: 1000px;
  margin: 50px 100px 0 50px;
  border: 2px solid black; }
  .content-wrapper > .hk-img {
    float: left;
    /* Adjust following margin to taste */
    margin-right: 2em; }
  .content-wrapper > .text {
    /* The following line prevents the text from wrapping under the image,
       creating a column effect. */
    overflow: hidden;
    color: black; }
    .content-wrapper > .text .text-header-content {
      margin-top: 0; }
于 2013-09-08T15:20:15.387 回答
0

问题：

这是因为，您的一个 div 设置为float: right;，另一个设置为float: left. 这将始终导致此问题。

解决方案：

  1. 或者你margin-right为 div设置一些float: right属性，这样它就会更接近一点。但是，嘿，您也可以尝试为其中的一个留出一些余量float: left。这样一来，双方就会更接近对方。

  2. float: right您从 div中删除该属性。为此，您需要尝试以下操作：

    img {
    浮动：左；
    }

    img, p, h1 {
    显示：内联块；
    }

此方法不需要设置任何边距值，即可更接近。相反，它甚至不会使文本正确浮动，它只会将其显示在图像的前面。没有那个空白。此外，您仍然可以尝试提供一些边距以使其看起来更可爱！

于 2013-09-08T15:22:23.327 回答