blocks|key|213601|text|尝试从.header-right中删除float:left和width:100%25+-然后正确的div将按照请求运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|213602|​|213603|.header+{
++float:+left;
++background:+#efefef;
++background-repeat:+no-repeat;
++width:+240px;
++height:+100px;
}

.header-right+{
++overflow:+hidden;+
++background-color:+#000;
++height:+100px;
}|code-block|syntax|javascript|213604|<div+class="header"></div>
<div+class="header-right"></div>|213605|213606|entityMap^0|3|D|J|A|U|A|1B|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|Q|$]]

<p>Try removing the <code>float:left</code> and <code>width:100%</code> from <code>.header-right</code> — the right <code>div</code> then behaves as requested.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
  float: left;
  background: #efefef;
  background-repeat: no-repeat;
  width: 240px;
  height: 100px;
}

.header-right {
  overflow: hidden; 
  background-color: #000;
  height: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;&lt;/div&gt;
&lt;div class="header-right"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3066564|text|使用css+grid可以更容易地实现这一点|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3066565|对于这两个display:+grid|3066566|give，您需要将它们包装在一个包装器中，假设|unordered-list-item|3066567|
|3066568|+parent+|3066569|3066570|在children|3066571|3066572|no和.parent|3066573|
中都使用D16和.parent中的grid-area，则需要在D17中使用D16grid-area>在D17中使用调整左侧div的宽度。|3066574|​|3066575|.parent+{
++display:+grid;
++grid-template-columns:+240px+1fr;
++grid-template-rows:+auto+1fr;
++grid-template-areas:+"header-left+header-right";
}
.header+{
++++background-image:+url(img/header.png);
++++background-color:+#ebebeb;
++++background-repeat:+no-repeat;
++++height:+100px;
++++grid-area:+header-left;
}

.header-right+{
++++overflow:+hidden;
++++background-color:+#000;
++++width:+100%25;
++++height:+100px;
++++grid-area:+header-right;
}|code-block|syntax|javascript|3066576|<div+class="parent">
++<div+class="header"></div>
++<div+class="header-right"></div>
</div>|3066577|3066578|css已经变得更高级，并在高级css的帮助下回答，如果它对某些人有用的话:)|3066579|entityMap^0|2|8|0|5|D|0|0|0|1|6|0|0|1|8|0|0|3|7|0|9|7|I|9|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1G|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|1H|8|@]|D|@]|E|$]]|$1|M|3|N|5|J|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|O|3|L|5|6|7|1L|8|@]|D|@]|E|$]]|$1|P|3|Q|5|J|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|R|3|L|5|6|7|1P|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1T|8|@$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|10|7|1Z|8|@]|D|@]|E|$11|12]]|$1|13|3|14|5|10|7|20|8|@]|D|@]|E|$11|12]]|$1|15|3|X|5|6|7|21|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|22|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|19|$]]

<p>with the use of <code>css grid</code> you can achieve this more easily</p>

<ul>
<li>you need to wrap those divs in a wrapper, lets say <code>parent</code> </li>
<li>give <code>.parent</code> <code>display: grid</code></li>
<li>give <code>grid-template-areas</code> in <code>.parent</code> and <code>grid-area</code> in both
<code>children</code></li>
<li>no need to use <code>float: left</code> in both <code>children</code>
adjust the width of left div using <code>grid-template-columns</code> in <code>.parent</code></li>
</ul>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header-left header-right";
}
.header {
    background-image: url(img/header.png);
    background-color: #ebebeb;
    background-repeat: no-repeat;
    height: 100px;
    grid-area: header-left;
}

.header-right {
    overflow: hidden;
    background-color: #000;
    width: 100%;
    height: 100px;
    grid-area: header-right;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;div class="header"&gt;&lt;/div&gt;
  &lt;div class="header-right"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>css has become much more advanced and answering with the help of that advanced css just if it can be useful to someone :)</p>


<p>I want a div with a fixed width image on the left and a variable width div with a background color, which should extend its width 100% on my device.
I can't stop the second div from overflowing my fixed div.</p>

<p>When I add overflow:hidden at the variable width div it just jumps under the photo, on the next row.</p>

<p>How can I fix this the right way (i.e. without hacks or margin-left, since I need to make the site responsive later with media queries and I have to change the image with other resolution images for each device)?</p>

<ul>
<li>beginner web designer trying to tackle the horror of responsive websites -</li>
</ul>

<p>HTML:</p>

<pre><code>&lt;div class="header"&gt;&lt;/div&gt;
&lt;div class="header-right"&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.header{
    float:left;
    background-image: url('img/header.png');
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    float:left; 
    overflow:hidden; 
    background-color:#000;
    width: 100%;
    height: 100px;
    }
</code></pre>


Fixed width div on left, fill remaining width div on right

我想要一个左边有固定宽度图像的div和一个有背景颜色的可变宽度div，这应该会在我的设备上扩展它的宽度100%。我不能阻止第二个div溢出我固定的div。当我添加overflow:隐藏在可变宽度的div时，它只是跳到下一行的照片下面。我如何才能以正确的方式解决这个问题(即没有hack或空白区，因为我需要让网站稍后响应媒...

问左侧固定宽度div，右侧填充剩余宽度div
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问左侧固定宽度div，右侧填充剩余宽度divEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问左侧固定宽度div，右侧填充剩余宽度div
EN