2 divs都是100％相邻

问题描述

相当简单的问题，但尝试了一切。

我想要的是2（实际上是5）divs旁边​​与类容器，所以我可以做一个横向1页网站。每个div必须是100％宽。所以2 divs意味着2个屏幕旁边的eachother。

这是我现在的css行：

  .container {width：100％; float：left; display：inline; } 
  

我无法让他们彼此排队。

这里是一个视觉，使它更清楚。

图片网址，以获得更大的预览：

滚动部分不是我的问题，只是div的位置。

这是可能使用百分比，或者这是不可能的。
如果是这样，请告诉我如何用css这样做。

提前感谢！

解决方案

你可以制作一个宽度为200％的容器，然后将两个div放在该元素的50％宽度内，这样可以确保一个div总是获得整个访问者的屏幕宽度。 / p>

例如：

 < div class =container ; 
< div class =contentContainer>< / div> 
< div class =contentContainer>< / div> 
< / div> 
  

和CSS：

  .container {
 width：200％; 
} 
 
 .contentContainer {
 width：50％; 
 float：left; 
} 
  

Quite simple question but tried about everything.

what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.

This is the css line i have now:

.container { width: 100%; float: left; display: inline; }

I cant get them to line up next to each other.

Here is a visual to make it more clear.image url for bigger preview: http://www.luukratief.com/stackoverflow.png

The scrolling part is not the issue for me, just the placement of the divs.

Is this possible using percentages or is this simply not possible.If so, please tell me how to do this with css.

Thanks in advance!

解决方案

You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.

For example:

<div class="container">
    <div class="contentContainer"></div>
    <div class="contentContainer"></div>
</div>

And CSS:

.container {
    width: 200%;
}

.contentContainer {
    width: 50%;
    float: left;
}

这篇关于2 divs都是100％相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！