时间戳

首页 > 解决方案 > Float 将所有内容移到一侧，HTML 和 CSS

html - Float 将所有内容移到一侧，HTML 和 CSS

问题描述

我对图像和“浮动：对；”有疑问。它移动图像上的所有内容。我真的需要帮助。我只是一个初学者。任何帮助将不胜感激。请帮我。我的 HTML 代码：


    <section id="header">
        <div class="container">
            <img scr="./img/logo.png" class="logo">

            <div class="header-text">
                <h1>Choose the cheapest teachers</h1>
                <span class="square"></span>
                <p>Here you can find the best people<br>Start working for us right now</p>
                <button class="common-btn">Read more</button>

                
            </div>
        </div>

我的 CSS 代码：

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font: Nunito;
}

#header {
    height: 100vh;
    background-image: url(img/image3.png);
    background-position: center;
    background-size: cover;
    width: 80vh;
    height: 80vh;
    padding:35px;
    float: right;
}
    


}
.conatiner {
    margin-right: 100px;
    margin-left: 100px;
}

.logo {
    margin-top: 30px;
    width: 100px;
    
}
.header-text{
    max-width: 350px;
    margin-top: 140px;
}

标签： htmlcssweb

解决方案

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font: Nunito;
}

#header {
    height: 100vh;
    background-image: url(img/image3.png);
    background-position: center;
    background-size: cover;
    width: 80%;
    height: 80vh;
    padding:35px;
    
}
    
img.logo{
    float: right!important;
}
.container {
    margin:0;
    width:100%;
}
.logo {
    margin-top: 30px;
    width: 100px;
}
.header-text{
    max-width: 350px;
    margin-top: 140px;
}
<section id="header">
    <div class="container">
        <img src="https://placekitten.com/200/200" class="logo">

        <div class="header-text">
            <h1>Choose the cheapest teachers</h1>
            <span class="square"></span>
            <p>Here you can find the best people<br>Start working for us right now</p>
            <button class="common-btn">Read more</button>

            
        </div>
    </div>
</section>

推荐阅读