Question

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

Search-box1将是扩展的div，用于填充容器搜索的剩余部分，根据查看的大小屏幕，它将具有不同的大小。

所以我需要搜索按钮1的大小保持在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; 

}

Answer 1

你可以尝试使用CSS calc（）函数，比如

width: calc(100% - 62px);

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

Answer 2

https://jsfiddle.net/ns2352gt/

也许你看起来像这样......

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: