在每个屏幕分辨率上并排显示

发布于 2024-12-12 02:52:52 字数 1280 浏览 0 评论 0原文

我使用 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 技巧可以为我解决这个问题。有什么想法吗？

顺便说一句，任何对此问题标题的建议都很好。这是我认为没那么有创意。

原文

I have created a simple layout with Html and CSS which is like below :

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>

See the JSFiddle sample :

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

As you can see, I am unable to see them smoothly. Some screen resolutions, it is perfect. But when I zoom in inside the browser, it is where the things get messy.

I thought about fixing this with CSS3 media queries but I am sure there is some CSS trick which solve this problem for me. Any thoughts?

BTW, Any suggestion for the title of this question would be great. It is
not so creative I think.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沉鱼一梦 2024-12-19 02:52:52

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

下面是一个示例：
http://jsfiddle.net/uuVuW/2/

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

回复收藏 0 原文

我一向站在原地 2024-12-19 02:52:52

你可以这样写：

  .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/

you can write like this :

  .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
 }

check this http://jsfiddle.net/sandeep/uuVuW/3/

回复收藏 0 原文

~没有更多了~