我有一个简单的网页,正在使用clearfix修复程序,如下所示

.clearfix:after{
content: "";
display: :table;
clear:both;
}


我已经创建了代码https://jsfiddle.net/xrcwrn/7b26pwsd/1/
我想在下方显示个人资料,但在右侧显示

最佳答案

您可以尝试用float包装所有具有div.clearfix属性的项目。像这样:



*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-family: halvitica ,Arial;
        font-size: 18px;
}
.container{
    width:1140px;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
}
h1,h2{
    color:green;
}
h1{
    font-size: 40px;
}
h2{
    font-size: 35px;
}
p{
    text-align: justify
}
.blog-post{
    width: 75%;
    float: left;
    padding-right: 30px;

}
.other-post{
    width: 25%;
 float:left;
}
.author-box{
   padding-top: 20px;
    border-top: 1px solid green;
}

.author-box img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
.clearfix:after{
    content: "";
    display: :table;
    clear:both;
    }


.other {
    margin-bottom: 40px;
}

.author-text {
    float: left;
    margin-left: 25px;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

<div class="container">
    <div class="clearfix">
        <div class="blog-post">
            <h2>He share of first to worse</h2>

            <p>
                Conveying or northward offending admitting perfectly my. Colonel gravity get thought fat smiling add but. Wonder twenty hunted and put income set desire expect. Am cottage calling my is mistake cousins talking up. Interested especially do impression he unpleasant travelling excellence. All few our knew time done draw ask.
            </p>
        </div>
        <div class="other-post">
            <div class="other">Post 1</div>
            <div class="other">Post 2</div>
            <div class="other">Post 3</div>
        </div>
    </div>


    <div class="author-box">
        <image src="https://randomuser.me/api/portraits/men/68.jpg" alt="author"/>
        <p class="author-text">Neeta Rai</p>
    </div>

</div>

关于html - Clearfix无法正常显示右侧的配置文件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59233774/

10-12 12:32
查看更多