Html 浮动H2-需要在下面推送文本

我需要把文本推到它下面H2的旁边。不知道为什么我不能解决这个问题，但任何帮助都会很好

注意：您看到的是左侧

HTML:

 <div class="item">
            <h2>Item 1</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
            <div class="button">Button</div>
        </div>

.item {
    height: 60px;
    width: 98%;
    border: #000000 solid 1px;
    margin-bottom: 10px;
    padding: 5px;
}

.item span {
    font-size: 10px;
}

h2 {
    text-align: left;
    font-size: 14px;
    margin: 0;
    float: left;
}

.button {
    width: 50px;
    height: 98%;
    border: #000000 solid 1px;
    background: gray;
    float: right;
}

span{
     display:block;
     clear:both;
     margin-bottom: -40px;
}

我已经尝试浮动文本，改变显示，甚至只是边缘下来，但我想一个很好的方法来做到这一点。任何帮助都将是伟大的，干杯

给你

CSS更改：

 <div class="item">
            <h2>Item 1</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
            <div class="button">Button</div>
        </div>

.item {
    height: 60px;
    width: 98%;
    border: #000000 solid 1px;
    margin-bottom: 10px;
    padding: 5px;
}

.item span {
    font-size: 10px;
}

h2 {
    text-align: left;
    font-size: 14px;
    margin: 0;
    float: left;
}

.button {
    width: 50px;
    height: 98%;
    border: #000000 solid 1px;
    background: gray;
    float: right;
}

span{
     display:block;
     clear:both;
     margin-bottom: -40px;
}

希望这有帮助。

给你

CSS更改：

 <div class="item">
            <h2>Item 1</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
            <div class="button">Button</div>
        </div>

.item {
    height: 60px;
    width: 98%;
    border: #000000 solid 1px;
    margin-bottom: 10px;
    padding: 5px;
}

.item span {
    font-size: 10px;
}

h2 {
    text-align: left;
    font-size: 14px;
    margin: 0;
    float: left;
}

.button {
    width: 50px;
    height: 98%;
    border: #000000 solid 1px;
    background: gray;
    float: right;
}

span{
     display:block;
     clear:both;
     margin-bottom: -40px;
}

---

希望有帮助。

实际上我想指出您的DOM结构不正确，考虑使用子包装器，<代码>浮点< /代码>一个到<代码>左边<代码>，另一个到<代码>右< /代码> .< 您遇到该问题的原因是，

h2

是浮动的，

span

是

inline

，因此它将位于您的

h2

旁边。分配

显示：块宽度

，则code>将导致您的

右侧

块被按下。最好考虑改变DOM，我在下面分享了我的解决方案。< /P>

HTML

---

实际上，我想指出的是，您的DOM结构不正确，考虑使用子包装器，<代码>浮点< /代码>一个到<代码>左边<代码>，另一个到<代码>右< /代码> .< 您遇到该问题的原因是，

h2

是浮动的，

span

是

inline

，因此它将位于您的

h2

旁边。分配

显示：块宽度

，则code>将导致您的

右侧

块被按下。最好考虑改变DOM，我在下面分享了我的解决方案。< /P>

HTML

试试这个：

<div class="item">
    <div class="left">
        <h2>Item 1</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="button">Button</div>        
</div>

我使用了

.left

左对齐标题和文本，并清除了

.item

上的浮动。 并从

h2

希望对你有帮助

试试这个：

<div class="item">
    <div class="left">
        <h2>Item 1</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="button">Button</div>        
</div>

我使用了

.left

左对齐标题和文本，并清除了

.item

上的浮动。 并从

h2

希望对你有帮助

---

我认为将所有东西都解开并绝对定位按钮更为合理

---

我认为把所有的东西都解开，然后绝对地按一下按钮，这样做更有意义

---

如果由于某种原因无法更改HTML标记，可以尝试以下CSS：

.item {
    height: 60px;
    width: 98%;
    border: #000000 solid 1px;
    margin-bottom: 10px;
    padding: 5px;
    position: relative;
    overflow: auto;
}

.item span {
    font-size: 10px;
    float: left;
    clear: both;
    margin-right: 60px;
}

h2 {
    text-align: left;
    font-size: 14px;
    margin: 0;
    float: left;
    border: 1px dotted blue;
}

.button {
    width: 50px;
    height: 50px;
    border: #000000 solid 1px;
    background: gray;
    position: absolute;
    top: 5px;
    right: 5px;
}

由于

.item

具有固定的高度，因此也可以固定

.button

的高度，例如50px

现在可以使用绝对位置将按钮放置在右侧（顶部和右侧的偏移量为5px）

对于

span

，您可以

float:left

并使用

clear:both

强制它在

h1

之后开始新行

然而，我还要添加一个60px的右边距，以确保较长的测试不会与按钮冲突

---

请参见演示：

如果由于某种原因无法更改HTML标记，可以尝试以下CSS：

.item {
    height: 60px;
    width: 98%;
    border: #000000 solid 1px;
    margin-bottom: 10px;
    padding: 5px;
    position: relative;
    overflow: auto;
}

.item span {
    font-size: 10px;
    float: left;
    clear: both;
    margin-right: 60px;
}

h2 {
    text-align: left;
    font-size: 14px;
    margin: 0;
    float: left;
    border: 1px dotted blue;
}

.button {
    width: 50px;
    height: 50px;
    border: #000000 solid 1px;
    background: gray;
    position: absolute;
    top: 5px;
    right: 5px;
}

由于

.item

具有固定的高度，因此也可以固定

.button

的高度，例如50px

现在可以使用绝对位置将按钮放置在右侧（顶部和右侧的偏移量为5px）

对于

span

，您可以

float:left

并使用

clear:both

强制它在

h1

之后开始新行

然而，我还要添加一个60px的右边距，以确保较长的测试不会与按钮冲突

---

---

参见演示：

哦，这是我的错，我忘了说，这按下了“按钮”。我需要它留在div

项中

。谢谢你的快速回答。不用担心，只需添加一个

marginbottom:-40px到我的以上班级，这将是适当的。-@RuddyOh这是我的错，我忘了说，这按下了“按钮”。我需要它留在div
项中
。谢谢你的快速回答。不用担心，只需添加一个
marginbottom:-40px到我的以上班级，这将是适当的。-@这是非常基本的HTML@迪基，等一下。因为我遇到了一个问题，当时根本想不出如何解决它，你会投反对票吗？这不是这个网站存在的原因吗？哎呀…我是从这里出来的…对论点不感兴趣这是HTML的基础@迪基，等一下。因为我遇到了一个问题，当时根本想不出如何解决它，你会投反对票吗？这不是这个网站存在的原因吗？哎呀…我是从这里出来的…对arguementsCool和crisp解决方案不感兴趣。但是您也可以将
.clr
添加到以前的div中，以获得相同的效果，而不是添加标记。不管怎样，+1 frm我：）非常好，谢谢你的回答。我喜欢这个，但我想我会和外星人先生一起去，因为它看起来比我的代码干净多了。谢谢你+1@Ruddy-我认为您的选择是正确的，因为Alien先生还详细阐述了如何在很大程度上清理您的非结构化标记。拇指up@Mr.Alien-是的。这种混乱是因为Ruddy的非结构化代码。但是，是的，即使在相同的场景中，我认为这一个也有效。@NathanLee文本在这个小提琴的按钮上重叠。酷而清晰的解决方案。但是您也可以将
.clr
添加到以前的div中，以获得相同的效果，而不是添加标记。不管怎样，+1 frm我：）非常好，谢谢你的回答。我喜欢这个，但我想我会和外星人先生一起去，因为它看起来比我的代码干净多了。谢谢你+1@Ruddy-我认为您的选择是正确的，因为Alien先生还详细阐述了如何在很大程度上清理您的非结构化标记。拇指up@Mr.Alien-是的。这种混乱是因为Ruddy的非结构化代码。但是是的，即使在相同的场景中，我认为这一个也行。@NathanLee文本在这个小提琴的按钮上重叠。@NathanLee Heya，