Question

我一直试图在div内部装入3个不同的元素并遇到问题。我似乎无法摆脱我的标题和段落之间的巨大空白。我已经在边距和填充上使用了一个文档来解决这个问题，虽然我已经取得了一些进展，但仍然存在一些未解决的问题。

enter image description here

我的尝试：

<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;
}

Answer 1

为图片添加样式：

float:left;

请参阅here

Answer 2

您必须将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; }

Answer 3

<强>问题：

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

<强>解决方案：

您可以为具有margin-right属性的div设置一些float: right，以便它更接近。但是，嘿，您可以尝试给float: left的那个人留一些余地。这样，两者将更加接近。
您从div中删除属性float: right。为此你需要尝试这个：

img {
float：left;
}

img，p，h1 {
display：inline-block;
}

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

如何删除div中两个元素之间的空白区域（见图）？

3 个答案: