css 解决在窗口缩小时，右边和下边留空白的问题

最新推荐文章于 2021-09-07 23:33:48 发布

栖身星河之中

最新推荐文章于 2021-09-07 23:33:48 发布

阅读量2k

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/ml12818/article/details/113685132

版权

css 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link text="text/css" rel="stylesheet" href="../css/index.css">
</head>
<body>
    <div class="box">
        <h2>来源百度百科</h2>
        <div class="text">
            <div class="text_b">
                <p>故事讲述了夏目贵志从外祖母夏目玲子的遗物中得到了那些由契约书所做成的“友人帐”..</p>
                <p>夏目贵志生来拥有强大的灵力，能看到妖怪和神明的存在。因其父母双亡，常年辗转于互相..</p>
                <p>夏目贵志（声优：神谷浩史；少年声优：藤村歩） [3]主人公,高中生，7月1日生，15岁，身高
                167厘米，B型。面容清秀，是个善良温和的少年。..</p>
            </div>
        </div>
    </div>
</body>
</html>

2.css 源码

/*清除边距*/
*{
    padding:0;
    margin:0;
}
html,body{
    height:100%;
}
/*设置宽高100%，放背景图，不重复，设置背景图的尺寸*/
.box{
    position: relative;
    width:100%;
    height:100%;
    background-image: url("../img/i1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%; /*宽高都100%*/
    min-width:1400px;
}
/*设置内边距，居中，字体大小*/
.box h2{
    padding-top: 20px;
    text-align: center;
    font-size: 36px;
}
/*第二个容器里面放背景，当图片宽度不够时也不会重复背景图，宽度，居中，尺寸百分比，高度*/
.box .text {
    background-image: url("../img/white.png");
    background-repeat: no-repeat;
    width: 1332px;
    margin: auto;
    background-size: 100% 100%;
    height: 580px; }
/*右浮动 最高级*/
.box .text .company {
    text-align: right !important; }
.box .text .date {
    text-align: right !important; }
 /*外边距*/
.box .text .text_b {
    margin: 10px 40px 0px 40px; }
 /*文字首行缩进，两端对齐，行高，字体大小，内边距，字体*/
.box .text .text_b p {
    text-indent: 38px;
    text-align: justify;
    line-height: 25px;
    font-size: 0.9em;
    padding-bottom: 1px;
    font-family: "Microsoft YaHei";
    /*字体*/ }

问题图
在这里插入图片描述
解决方案
在放置背景图的div里加上最小宽度**

/*根据个人屏幕宽度设置*/
min-width:1400px;

附上效果图
在这里插入图片描述

栖身星河之中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 解决在窗口缩小时，右边和下边留空白的问题

1.html源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link text="text/css" rel="stylesheet" href="../css/index.css"></head><body> <div class=
复制链接

扫一扫

专栏目录