当一个div包含固定大小的背景图像时，并排保持响应式div

问题描述：

需要并排2个div 我有一个div，背景图像为62px，另一个div需要占用剩余的容器div宽度。当一个div包含固定大小的背景图像时，并排保持响应式div

Search-box1将被扩展以填充容器搜索的其余部分，该容器将根据其查看的屏幕大小以不同的大小进行扩展。

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

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

}

现在在.containersearch中使用{display：inline-flex;} –

我有我的疑惑，但它会工作:) – Techagesite

你知道如何将.search-box1变成链接吗？ – Techagesite

答

你可以尝试使用CSS计算（）函数，像

width: calc(100% - 62px);

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

答

https://jsfiddle.net/ns2352gt/

也许你看起来像这样..

body{ 
 
    margin:0; 
 
    } 
 
    .containersearch 
 
    { 
 
    border: 1px solid #006699; 
 
    background:#0A3D5D; 
 
    padding:5px 5px 5px 5px; 
 
    width:100% 
 
    border-bottom-left-radius:8px; 
 
    border-bottom-right-radius:8px; 
 
    } 
 
    input[type=text] 
 
    { 
 
    position:relative; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
     font-size: 16px; 
 
    background-image: 
 
    url('http://findicons.com/files/icons/2226/matte_basic/32/search.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
    background-color: white; 
 
    padding: 12px 20px 12px 10px; 
 
    } 
 

 
    input[type=text]:focus { 
 
     width: 100%; 
 
    }


 
    <body> 
 
     <div class = "containersearch"> 
 
     <form> 
 
     <input type="text" name="search" placeholder="Search.."/> 
 
     </form> 
 
     </div> 
 
    </body>

这很酷，但我试图通过提供链接到一个页面与谷歌搜索它的图像，以尽量减少页面加载时间。图像本身是一个搜索框，当用户点击它来输入文本时，它会将它们带到谷歌搜索框页面。所以我需要搜索框div来成为一个链接。所以就像你将搜索按钮作为链接一样，我需要search-box1作为链接。 – Techagesite

https://jsfiddle.net/tjbaezid/vy3evuof/确定现在检查这一个..但它的主意不错。大多数用户因此离开您的网站。更好的谷歌自定义搜索API [https://developers.google.com/custom-search/json-api/v1/introduction]可以让你开发网站和...使用这个API，你可以使用RESTful请求来获取网页搜索或图像。祝你好运 –

这真的很好。我没有得到很多搜索谷歌搜索API和它的超过150kb和吨连接加载它。决定改用这种方法。令人惊叹的小提琴，但没有出现在我的网站上。不知道为什么。 – Techagesite

当一个div包含固定大小的背景图像时，并排保持响应式div

相关推荐