html - 当一个 div 包含固定大小的背景图像时，将响应式 div 并排放置

Question

需要并排放置 2 个 div我有一个带有 62px 背景图像的 div，另一个 div 需要占用剩余的容器 div 宽度。

Search-box1 将是一个 div，它会扩展以填充容器搜索的其余部分，该容器搜索的大小将根据其在什么尺寸的屏幕上查看而不同。

所以我需要 search-button1 的大小保持在 62px 宽度，而 search-box1 在 containersearch 拉伸(stretch)以响应地填充时填充剩余部分。

<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>


.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;

}


.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;

}

.containersearch


{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;

  width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px; 

}

Answer 1

你可以尝试使用 CSS 的 calc() 函数，比如

width: calc(100% - 62px);

http://www.w3schools.com/cssref/func_calc.asp