鍍金池/ 問答/HTML5  HTML/ 如何讓div寬度隨父div寬度變化而變化

如何讓div寬度隨父div寬度變化而變化

clipboard.png
右邊的div寬度固定，如何讓左邊的div隨著父div的寬度變化而寬度發(fā)生變化

                                        <div class="card">
                                            <div class="card-left">
                                                <span>供應(yīng)商ID:0155E0101H</span>
                                                <span>公司名:</span>
                                                <span>優(yōu)勢產(chǎn)品:飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)</span>
                                                <span>產(chǎn)品線:飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)飛機(jī)</span>
                                            </div>
                                            <div class="card-right">
                                                <img src="/Uploads/temp/test/pic1.jpg" style="width: 100%;height: 45%">
                                                <img src="/Uploads/temp/test/pic2.jpg" style="width: 100%;height: 45%">
                                            </div>
                                            <div class="clear"></div>
                                        </div>
回答
編輯回答
離魂曲

<div style="width:100%;overflow:hidden;">

<div style="float:right;height:100px;border:1px solid #f00;width:100px;"></div>
<div style="border:1px solid #0f0;height:100px;"></div>

</div>

圖片描述

2017年7月8日 15:22
編輯回答
背叛者

flex布局

2017年1月30日 23:15
編輯回答
安于心

左側(cè)固定，右側(cè)填充的方法，觸發(fā)BFC

.card-right{
    float:right;
    width:300px
}
.card-right{
    display:table-cell;
    width:2000px;
}

// 或者
.card-right{
    display:block;
    overflow:hidden;
}

右側(cè)固定，左側(cè)填充的話，可以用calc

div {
  height: 100px;
  border: 1px solid red;
}

.card-left{
  float:left;
  width: calc(100% - 130px);
}

.card-right{
  float: right;
  width: 100px;
}
2018年3月29日 10:21