Question

我正在尝试使用媒体查询在最大宽度达到960px时重新调整about me窗口的大小但是文本没有包裹在图像下面，其中一些停留在图像的一侧。我有它设置所以关于我部分缩小50％，当它达到960px。有人可以帮忙，不知道我做错了什么。

谢谢

这是我的html和css：

＆＃13;

* {
  box-sizing: border-box;
}

header {

    /* how to make header stay at the top of the page and cover top*/
    width: 100%;
    background: #ffffff;
    border-bottom: #666666 4px solid;
    overflow: auto;
    /*width: 270px; */
}

header li:last-child a {
    border: none;
}

h2.namebox {

    background-color: #4aaaa5;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    border: 1px black;
    float: left;
    padding: 20px;
    margin: auto;
    margin-left: 31px;
    letter-spacing: 0.5px;
    font-weight: 900;
    font-family: Georgia;

}

ul.navbox {


    margin: 0;
    padding: 0;
    display: inline;
    float: right;
    color: #777777;
    
   
}

li a:last-child {
    border-right: none !important;
}

a:link {
    text-decoration: none;
    color: blue;
}

a:visited {
    text-decoration: none;
    color: grey;
}

a:hover {
    text-decoration: underline;
    color: green;
}

a:active {
    text-decoration: underline;
}

li {

    float: left;
    display: inline;
    margin: 5px 0 0 5px;
    border-left: 1px solid #333;
    padding: 10px;
    /*text-decoration: none; not removing links*/
}




h1.line {

    color: #4aaaa5;
    font-family: 'Anton', sans-serif;
    display: block;
    height: 10px;
    border: 0;
    padding: 2px;
}


body {

    width: 960px;
    background-image: url(http://www.designbolts.com/wp-content/uploads/2013/02/Textured-Stripes-Grey-Seamless-Patterns-For-Website-Background.jpg);
    background-repeat: repeat;
    margin: auto;
}

div.content{


    margin: auto;
    clear: both;
    
}
div.section {

    background-color: #ffffff;
    color: #777777;
    width: 650px;
    border: 1px solid grey;
    padding-left: 20px;
    padding-right: 20px;
    margin: 30px 30px;
    clear: both;
    overflow: auto;
}

.image {

    float: left;
    padding: 20px;
    overflow: hidden;
}
    
div.contactbox1{


    width: 200px;
    height: 160px;
    float: right;
    border: 1px solid grey;
    text-align: center;
    z-index: 1;
    background-color: #ffffff;
    color: #4aaaa5;
    clear: both;
    overflow: auto;
    margin: auto;
    
}


hr.hrline {


    float: center;
    width: 75%;
    margin-bottom: 13px;
}

h3.line {


    font-family: 'Fjalla One', sans-serif;
    font-size: 19px;
    position: center;
    padding: 0;
}

footer {


    background-color: #666666;
    color: #ffffff;
    border-top: teal 6px solid;
    text-align: center;
    /* how to make it cover the entire bottom portion of webpage */
    padding: 40px 0;
    margin: auto;
    clear: both;
    overflow: auto;
    }
@media screen and (max-width: 980px) {
        
    div.section {

        width: 50%;
        height: auto;

    }

    div.contactbox1{


        
        
    }

}

＆＃13;

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" type="text/css" href="about.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <header>
        <h2 class="namebox">Dude</h2>
        <ul class="navbox">
            <li><a href="about.html">About</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </header>
    <div class="content">
        <section>
            <div class="section">
            <h1 class="line">About Me</h1>
            <hr>
            <img class="image" src="file:///Users/vitamind/Desktop/Basic-Portfolio/assets/images/Webp.net-resizeimage.jpg">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        </section>
        <aside>
            <div class="contactbox1">
            <h3 class="line">Connect with Me</h3>
            <hr class="hrline">
            <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_square_color-48.png">
            <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_square_black-48.png">
            <img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/overflow-48.png">
            </div>
        </aside>
    </div>
    <footer>
        <p>&copy;Copyright 2017 
    </footer>
</body>

</html>

＆＃13;

Answer 1

那是因为你正在浮动图像，因此文字将在包装之前尽可能多地放在一边。

您可以在媒体查询中将以下内容添加到图片中，以推送下面的文字。

.section img {
  width: 100%;
}

或者，如果您想避免调整图片大小，可以改为设置float: none;。

.section img {
  float: none;
}

Working Resizable Fiddle（仅用于演示的lorempixel图像）

使用媒体查询调整网站大小，但调整大小时文本不包装

1 个答案: