问题：

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

邢同

2023-03-14

我有一个简单的网页，两个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中吗？谢谢你！

共有2个答案

高经艺

2023-03-14

更改div标记的最小宽度（minwidth）并删除css中的最小高度（可选）。

测验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;

}

闻人献

2023-03-14

要创建响应性页面设计，您可以使用以下方法：

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

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

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

您必须为不同的屏幕大小编写多个媒体查询

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

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

请参阅引导程序：http://www.w3schools.com/bootstrap/default.asp

请检查下面的代码以获取您的答案。我已经展示了它使用引导。

<!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>

类似资料：

如何在另一个div中分配一个div

各位早上好，我正在创建一个产品销售系统，这个话题会有点长，因为我想好好解释一下。正在用Vaadin+MySQL+springboot+Maven开发的系统在主屏幕上，我们有一个网格，上面有“新建”、“更改”和“删除”按钮：当点击new按钮时，将打开一个窗口，开始“销售”产品：这里的问题是这样的，当我点击“+项”时会出现以下情况：问题：创建了一个滚动条（在窗口的右边），保存、关闭和+项按钮
如果同时定义了两个函数，一个带const，一个不带，会有问题吗？

本文向大家介绍如果同时定义了两个函数，一个带const，一个不带，会有问题吗？相关面试题，主要包含被问及如果同时定义了两个函数，一个带const，一个不带，会有问题吗？时的应答技巧和注意事项，需要的朋友参考一下不会，这相当于函数的重载。
如何将一个div覆盖在另一个div上

问题内容：在将一个人叠加到另一个人上时，我需要帮助。我的代码如下所示：不幸的是，我不能将或嵌套在第一个内部。如图所示，它必须是两个单独的，但是我需要知道如何将放置在上方和最右侧，并以的顶部为中心。问题答案：我建议使用来了解和子元素。
两个div，一个固定宽度，另一个固定

问题内容：我有两个div容器。尽管一个需要为特定宽度，但我需要对其进行调整，以便另一个div占用其余空间。有什么办法可以做到吗？问题答案：请参阅： http ： //jsfiddle.net/SpSjL/ （调整浏览器的宽度） HTML： CSS：您也可以使用这样做，这通常是一种更好的方法：如何将输入元素与其标签放在同一行？
如何将一个DropWizard(带有freemarker)视图嵌入到另一个视图中？

我正在使用DropWizard和Freemarker构建一个视图，该视图基于Web服务的结果显示不同类型的表单。我将表单创建为视图——每个视图都有自己的ftl。因此，在我的资源中，我发现我需要哪种表单，然后加载main.ftl，将表单视图作为参数传递（见下文）。这不起作用。有人能看出我们哪里出了问题吗？或者，是否有完全不同的方法使用DropWizard和freemarker将视图链接在一起？
如何求一个带权无向图中包含两个给定节点的最小带权圈？

给定一个加权无向图和一组节点。给定两个节点和。我想找到从到的两条单独的（不重叠的）路径，使两条路径的权重之和最小。我将这个问题解释为标题所描述的，即包含和的最小加权循环。显然，从到找到第一条最小加权路径然后从图中去掉p1中的边，然后找到第二条最小加权路径是不正确的。我怎么才能找到这样的循环呢？

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档