Question

我还是比较新的html和css，而且我无法解决这个问题。我有三个带有一些文本的div，我希望它们彼此相邻。我把它们设置为浮动：左边但它们没有这样做。

.threethings {
  width: 20%;
}
.threethings div {
  text-align: center;
  position: relative;
  float: left;
}

<div class="threethings">
  <div><span>Style</span>
    <br>
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
  </div>
  <div><span>Style</span>
    <br>
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
  </div>
  <div><span>Style</span>
    <br>
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
  </div>
</div>

Answer 1

试试这个

        .threethings {
            width : 100%;
        }

        .threethings div {
            width: 20%;
            text-align: center;
            position: relative;
            float : left;
        }

所以会发生什么事情是div在您的情况下浮动但不是并排，因为您给父母提供20％的宽度，因为孩子们不能并排加载。

我所做的是给父母一些大的宽度和儿童一些小的宽度，这样父母可以容纳并排浮动的孩子。

以及div是阻止。可能没有必要width:100%

Answer 2

您正在浮动父类 - 而不是包含段落的div。将.threethings类添加到3个嵌套的div中，以指示它们将它们的前进div与它们一起浮动。

请注意，您可能还需要给div一个固定的宽度，因为你在那里的段落可能会超过你的html主体的长度，这反过来会迫使它们进入一个新的行。

Answer 3

试试这个解决方案

 .threethings {
       width:100%; 
    }
    .threethings div {
        width:33%; 
        position: relative;
        float : left;
    }

Div没有向左浮动

3 个答案: