如何调整两列div的百分比宽度？

Question

我目前创建了一个并排的两列div,每个div为50%.我试图找出如何使左div 70%和右div 30%.

此外,除了2列div.如果我想创建一个25%的每个25%的div和每个20%的五列div.我该怎么做？

这是我的jsfiddle:http: //jsfiddle.net/hus​​kydawgs/zhckr47h/3/

这是我的HTML:

.container-2col {
  clear: left;
  float: left;
  width: 100%;
  overflow: hidden;
  background: none;
}

.container-1col {
  float: left;
  width: 100%;
  position: relative;
  right: 50%;
  background: none;
}

.col1 {
  float: left;
  width: 46%;
  position: relative;
  left: 52%;
  overflow: hidden;
}

.col2 {
  float: left;
  width: 46%;
  position: relative;
  left: 56%;
  overflow: hidden;
}

Answer 1

使用display:inline-block而不是float. 这消除了对其他divs. 使用 删除元素之间的空格margin-right:-4px。如果您想挖掘这些问题，还有其他解决方案。Float有它的地位，但我发现它造成的问题多于它解决的问题。

 .col1 {
    display:inline-block;  
    width: 30%;
    padding:0;
    margin:0;
    margin-right:-4px;
    vertical-align:top;
    background-color:yellow;
    }

width只需相应地更改col2.

请参阅 JSfiddle： https://jsfiddle.net/zhckr47h/12/