Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 浮动两个div时设置div的宽度(自动)_Html_Css - Fatal编程技术网

Html 浮动两个div时设置div的宽度(自动)

Html 浮动两个div时设置div的宽度(自动),html,css,Html,Css,我有以下HTML: <div style="width:300px;background:yellow;"> <div style="float:left;border:solid 2px red;"><!--Img Div--> <img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png"&g

我有以下HTML

<div style="width:300px;background:yellow;">
    <div style="float:left;border:solid 2px red;"><!--Img Div-->
      <img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
    </div>
    <div style="border:solid 2px lime;float:left;"><!--Text Div-->
      Banana!
    </div>
    <div style="clear:both;"></div>
</div>

香蕉!
我需要设置文本Div的宽度,使其占据剩余的宽度。我知道这可以通过使用widthstyle属性作为
width:164px来实现。我需要知道的是:这可以在不使用其他css属性手动设置宽度的情况下完成吗?

1)从文本div中删除
float:left

2) 在文本div上设置溢出:隐藏

这将创建一个新的块格式上下文,使文本div填充剩余的宽度

<div style="width:300px;background:yellow;">
        <div style="float:left;border:solid 2px red;"><!--Img Div-->
          <img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
        </div>
        <div style="border:solid 2px lime;display:block; text-align: center; overflow: hidden;"><!--Text Div-->
          Banana!
        </div>
        <div style="clear:both;"></div>
    </div>

香蕉!

我添加了
显示:块;文本对齐:居中;溢出:隐藏
并从文本div中删除了
浮动:左
对于父项使用
显示:表格
,对于要填充
宽度
的单元格使用
显示:表格

注意:已将样式移到外部

.top{
宽度:300px;
背景:黄色;
显示:表格;
}
.里面{
浮动:左;
边框:实心2px红色;
}
.txt{
边框:固体2份石灰;
显示:表格单元格;
宽度:100%;
垂直对齐:顶部;
}
.清楚{
明确:两者皆有;
}

香蕉!

将宽度设置为100%会将其向下推,如果这是您的意思..没有帮助我不想做任何计算。。这就是我的意思……)您想要一个CSS属性来确定父元素的剩余宽度吗?而不是你给它一个164px的宽度,浏览器会为你做吗?我从没听说过这样的事。为什么要投否决票?我认为这是一个合理的问题@乔萨尼拉切塔,你没抓住重点。父div已具有300px的指定宽度。检查已接受的答案。现在你已经听说过“这样的事”。)再看一次小提琴——看看边框是如何只环绕文本而不是图像的。这正是OP想要的:“我需要设置文本Div的宽度,使其占据剩余的宽度”@Bhojendra-C-LinkNepal-NB:如果您只是删除浮动,那么文本不会占据剩余的宽度,它占据100%的宽度(包括图像)。这就是为什么你需要overflow@chipChocolate.py-但在问题的内容中,他澄清了他实际上希望div占据我理解的剩余宽度(字里行间阅读)实际上,他并不需要两个浮动,他只是描述代码的当前状态和他希望元素如何运行的基本布局sit@Danield谢谢解决了问题。:)