Question

我有一个简单的网页，有两个div，并排。一个包含文本，另一个包含整个右侧div的图像。

    <div id="left_column">


            <a href="index.html" id="logo">
            <h1 class="headings">The 100 Days Project</h1>
            <h2 class="headings">Illustrations and love</h2>



            <nav>
                    <ul>
                        <li><a href="new_treehouse.html" class="selected">Portfolio</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>

                    </ul>
            </nav>

            <div id="footer">

            <a href="http://twitter.com/cilvako"><img src=http://placekitten.com/g/200/300 alt="Twitter Logo" class="social_icon"></a>
                            <a href="http://facebook.com/"><img src=http://placekitten.com/g/200/300 alt="Facebook Logo" class="social_icon"></a>

                        <p>&copy; 2016 Silvia Bogdan</p>
                        </div>
    </div>

    <div id="right_column">

            <img src="http://placekitten.com/g/200/300" width="495px" height="593px">
            </div>

完整的代码在这里https://jsfiddle.net/Cilvako/fz97emmz/ 当我调整浏览器大小时，图像div调整大小但文本div没有任何反应。我怎样才能做出响应？我应该将它们都包装在容器div中吗？谢谢！

Answer 1

更改div标签的最小宽度（min-width）并删除css中的最小高度（ Optional ）。

<强>的test.html

<html>
     <head>
         <link rel="stylesheet" href="css.css">
     </head>
 <body>


        <div id="left_column">
                <a href="index.html" id="logo">
                <h1 class="headings">The 100 Days Project</h1>
                <h2 class="headings">Illustrations and love</h2>
                <nav>
                        <ul>
                            <li><a href="new_treehouse.html" class="selected">Portfolio</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>

                        </ul>
                </nav>
                <div id="footer">
                <a href="http://twitter.com/cilvako"><img src=http://placekitten.com/g/200/300 alt="Twitter Logo" class="social_icon"></a>
                                <a href="http://facebook.com/"><img src=http://placekitten.com/g/200/300 alt="Facebook Logo" class="social_icon"></a>

                            <p>&copy; 2016 Silvia Bogdan</p>
                            </div>
        </div>
        <div id="right_column">

                <img src="http://placekitten.com/g/200/300" width="495px" height="593px">
                </div>
</body>
</html>

<强> css.css

* {
  box-sizing: border-box;
}

html {
    font-size: 16px;
}


/*-------------- LEFT COLUMN -----------------------*/

a {
    text-decoration: none;
    color: black;
}

#left_column {
    width: 50%;
    float: left;
    min-width: 300px; /* Change here */
    color: black;
    padding-left: 1.875rem;
}
#left_column h1 {
    font-family: 'Frijole', cursive;
    font-size: 2rem;
    color: orange;
    margin-bottom: 0;
    margin-top: 2rem;
}
#left_column h2{
    margin-top: 0;
    font-size: 1.15rem;

}
#left_column ul {
  list-style-type: none;
    padding-top: 7.25rem;
    padding-left: 0;
}
#left_column ul li {
    font-family: 'Frijole', cursive;
    line-height: 2.1875rem;
}

/*-------------- RIGHT COLUMN -----------------------*/

#right_column {

    width: 50%;
    float: left; /* Change here */
}

#right_column img {

    width:100%;
    height:auto;
}

/*-------------- FOOTER -----------------------*/

#footer {
    padding-top: 22.5rem;
    color: orange;
}

#footer p {
    margin-top: 0.3215rem;
}

.social_icon {
    display: inline;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.3215rem;
    margin-bottom: 0;

}

Answer 2

要将页面设计创建为响应式，您可以使用以下方式执行此操作：

1）编写自己的自定义媒体查询。 - 媒体查询是我们为处理不同屏幕尺寸而编写的css属性。

对于Ex：标准显示器分辨率为1280 x 720，因此要处理该分辨率，您必须以这种方式编写媒体查询。

@media screen and (min-width: 720px) and (max-width: 1280px) {
// Add your css classes here
}

您必须针对不同的屏幕尺寸编写多个媒体查询。

2）使用已经很流行的css框架，如 bootstrap ， zurb 等。

使用已经建立的css框架，您编写媒体查询的工作将变得更加容易。所有你必须使用它的框架的CSS类。

参考bootstrap：http://www.w3schools.com/bootstrap/default.asp

检查以下代码以获取答案。我用bootstrap显示了它。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Grid</h1>
  <p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPbpweYyc1mQOwkCQYsUmWUeRAo00tmYNzx7RfCynUzJhBEZb-">
    </div>
  </div>
</div>
    
</body>
</html>

＆＃13;

如何制作两个div（一个带有文本，一个带有图片）响应？

2 个答案: