Question

我用Html和CSS创建了一个简单的布局，如下所示：

CSS

.search-box{border:1px solid gray;padding:
5px;border-right:5px solid gray;padding-right:30px;
width:60%;font-size:14px;}

.search-box:focus{outline:none;}

.search-buton{background-color:gray; 
border:1px solid gray;padding:5px;font-size:14px;
cursor:pointer;color:#fff;width:10%;}

.search-buton:hover{background-color:#575E5B;border:1px solid #575E5B;}

.left{float:left; border:1px solid gray; width:68%;padding:10px;}

.right{float:right; border:1px solid gray;width:28%;padding:10px;}

HTML

  <div class="right">
      <input class="search-box" type="text" placeholder="ASP.NET MVC, JQuery, Ajax, etc." />
      <input class="search-buton" type="submit" value="Search" />
  </div>
  <div class="left">

  </div>    
  <div style="clear:both;"></div>

参见JSFiddle示例：

http://jsfiddle.net/tugberk/uuVuW/

正如你所看到的，我无法顺利地看到它们。一些屏幕分辨率，它是完美的。但是当我在浏览器中放大时，事情会变得混乱。

我想过用CSS3媒体查询解决这个问题，但我确信有一些CSS技巧可以解决这个问题。有什么想法吗？

顺便说一下，对这个问题的标题的任何建议都会很棒。它是我认为不那么有创意。

Answer 1

您还需要使用填充百分比，因为这会影响整体宽度

这是一个例子： http://jsfiddle.net/uuVuW/2/

这解释了盒子模型： http://www.w3.org/TR/CSS2/box.html

Answer 2

你可以这样写：

  .left{
   border:1px solid gray;
   padding:10px;
   overflow:hidden;
   padding: 10px;
  }

 .right{
  float:right; 
  border:1px solid gray;
  width:28%;
  padding:10px;
  margin-left:20px
 }

检查此http://jsfiddle.net/sandeep/uuVuW/3/

并排在每个屏幕分辨率上

2 个答案: