Question

我一直在寻找答案，但我无法在任何地方找到解决办法。我只是试图将h1标签移到图标顶部，但每当我使用margin-top或padding-top将h1向下移动到页面时，它也会向下移动列。我在那里的所有列周围放置了边框，看看边框是否有触摸但是没有用。您是否可以在h1或列周围找到某种默认填充？

以下是我的codepen的链接：https://codepen.io/4eller/pen/eVmxeM

HTML：

<hr width="35%">

<div class="container maincon2">
    <h1 class="wwd">Social Media Has Never Been Easier</h1>
    <hr class="hr1">
    <h1 class="whatwedo">What makes us stand out from the rest</h1>
    <div class="row topicons">
        <div class="col-md-4 maintab1">
            <img src="images/graph.png" class="barimg">
            <hr width="50%" id="hr2">
        </div>
        <div class="col-md-4 maintab2">
            <img src="images/piggy-bank.png" class="pigimg">
            <hr width="50%" id="hr2">
        </div>
        <div class="col-md-4 maintab3">
            <img src="images/support.png" class="supportimg">
            <hr width="50%" id="hr2">
        </div>
    </div>
</div>
</div>

</div>
<div class="container maincon3">
    <div class="row">
        <div class="col-lg-12 mediumcon2">
            <hr class="hrgreen">

CSS：

.maincon2 {
    width: 100%;
    height: 500px;
    background: #424242;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    border: 1px solid orange;
}

.topicons {
    border: 1px solid red;
    margin-top: 70px;
    height: 250px;
    table-layout: fixed;
}

Answer 1

如果我正确理解了您想要的内容（并非真正100％明确），您可以将position: relative应用于该代码并使用top将其向下移动而不会影响其他内容，因为{{1} }加上位置设置会导致元素相对于其原始（静态）位置移动，但它前后的元素将保留：

position: relative

更改了代码：https://codepen.io/anon/pen/MQYRKY

Answer 2

提供package main import "fmt" func main(){ fmt.Println("Enter a number: ") var i int32 fmt.Scanf("f",%i) output := i*1 if output%2 == 0{ fmt.Print("even") }else { fmt.Println("odd") } }代码h1，然后将其向左移动position:absolute;（将200替换为您想要的任何数字）

使用left:200px，margin或padding时，它会移动其他元素的原因是因为它们被视为页面“流”的一部分，这意味着它们将与周围的其他元素互动并碰撞。 position:relative，从页面流中删除目标元素，从而允许您将其放在任何地方而不移动其他元素。

如何阻止h1标签更改列的位置

2 个答案: