并排的两个 div - 流体显示 [英] Two divs side by side - Fluid display

问题描述

我正在尝试并排放置两个 div 并为其使用以下 CSS.

#left {向左飘浮;宽度:65%；溢出:隐藏；}#对 {溢出:隐藏；}

HTML 很简单，左右两个 div 在一个包装 div 中.

<div id="left">左侧div</div><div id="right">右侧div</div>

我也曾多次尝试在 StackOverflow 和其他网站上寻找更好的方法，但找不到确切的帮助.

所以，乍一看，代码运行良好.问题是，当我以 (%) 增加宽度时，左边的 div 会自动获得填充/边距.因此，在 65% 宽度处，左侧 div 有一些填充或边距，并且与右侧 div 不完全对齐，我尝试将填充/边距设为 0，但没有成功.其次，如果我放大页面，右边的div滑到左边的div下面，就像不是流体显示一样.

注意:对不起，我已经搜索了很多.这个问题已被问过很多次，但这些答案对我没有帮助.我已经解释了我的问题是什么.

我希望能解决这个问题.

谢谢.

抱歉，我的 HTML 问题，左侧和右侧都有两个框"div，它们在 % 中有填充，因此由于宽度较大，左侧显示更多填充.抱歉，上面的 CSS 效果很好，流畅的显示和修复，抱歉问错了问题...

解决方案

在我当前的站点中使用此 CSS.它完美无缺！

#sides{保证金:0;}#剩下{向左飘浮;宽度:75%；溢出:隐藏；}#对{向左飘浮;宽度:25%；溢出:隐藏；}

I am trying to place two divs side by side and using the following CSS for it.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

The HTML is simple, two left and right div in a wrapper div.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.

So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.

Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.

I hope there is a fix for that.

Thank you.

EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...

解决方案

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

这篇关于并排的两个 div - 流体显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！