So I have this structure(ignore russian text):
所以我有这个结构(忽略俄文):
.sliders-container {
position: relative;
width:100%;
float:left;
}
.slider{
position: relative;
overflow: hidden;
float: left;
}
#prev, #next{
cursor: pointer;
z-index: 100;
}
#prev{
float:left !important;
}
#next{
float:right !important;
}<div class="sliders-container">
<a id="prev">Prev</a>
<a id="next">Next</a>
<div class="slider">
<p class="container-text">
<h1>Join US</h1>
</p>
<p class="container-text">
<strong>Можно ли присоединиться?</strong> Да, конечно. Но сначала <a href="#">прочитайте наши базовые ожидания</a> — что мы ждем от каждого вступающего в UTG.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Преданность, участие и общение</h1>
</p>
<p class="container-text">Чем больше вы вкладываете в группу, тем больше получаете взамен. Если вы хотите играть с нами, вы должны быть готовы участвовать в жизни группы. Мёртвый груз никому не нужен. Сила группы зависит от активного участия членов сообщества. Если вы не отписываетесь в темах, когда вас просят, не участвуете в общении на форумах, в чате или не принимаете участия в играх, то вы являетесь никем для этой группы.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Зрелость</h1>
</p>
<p class="container-text">Вы должны быть готовы серьёзно отнестись к игре. Всем дуростям своё время и место, и вы должны уметь определять это время. Помимо этого, вы должны быть способны на адекватное, нормальное общение как в игре, так и вне её.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Желание учиться, совершенствоваться и быть частью команды</h1>
</p>
<p class="container-text">ArmA — это не та игра, где вы играете сами. Успех зависит от каждого. Чтобы быть эффективным в игре, вы должны знать свою роль, структуру командования, тактику и базовые процедуры, уметь общаться, работать с напарниками и использовать своё оружие. Если вы не командный игрок и не в состоянии выдержать того, что кто-то будет отдавать вам приказы, то можете дальше не читать. На данный момент накопилось много различной информации помимо БТП — начиная с этого текста, заканчивая обширной базой знаний по используемым модам. Вы должны быть готовы самостоятельно изучить всю необходимую информацию и разобраться в ней. Нам не нужны те, кто не способен уделить этому время.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Требования</h1>
</p>
<p>Следующие вещи являются <i>обязательными</i> без исключения:</p>
<ul>
<li>
<a href="http://www.arma3.com/" target="_blank">Лицензионная версия ArmA3</a>. Естественно это также подразумевает установленный <a href="http://ru.wikipedia.org/wiki/Steam">Steam</a>, так как игра распростряняется только через него.
</li>
<li>
<a href="http://teamspeak.com/?page=downloads" target="_blank">Клиент TeamSpeak 3</a>. Он будет нужен для общения во время игр.
</li>
<li>
<a href="http://en.wikipedia.org/wiki/Microphone" target="_blank">Микрофон</a>. Если у вас его нет, можете зайти в любой компьютерный магазин и купить любую самую дешёвую гарнитуру.
</li>
<li>
<a href="http://www.skype.com" target="_blank">Skype клиент</a>. Он понадобится для быстрого и комфортного общения внутри группы.
</li>
</ul>
</div>
<div class="slider">
<p class="container-text">
<h1>Что дальше?</h1>
</p>
<p class="container-text">
<li>
Прочитайте <a href="http://ttp2.tacticalgaming.kiev.ua/" target="_blank">базовые тактики и процедуры</a>.
</li>
<li>
Свяжитесь через Skype с <strong>messiahukraine</strong>.
</li>
</p>
</div>
</div>And I have all the divs being positioned one after another. What I want is this: I want all the divs to be on top of each other(i will use it build a jQuery slider later), but I want to do it without using position:absolute
我让所有的div都一个接一个地定位。我想要的是:我希望所有的div都在彼此的顶部(我将使用它稍后构建一个jQuery滑块),但我想在不使用position的情况下这样做:绝对
.sliders-container {
position: relative;
width:100%;
float:left;
}
.slider{
position: absolute;
overflow: hidden;
float: left;
}
#prev, #next{
cursor: pointer;
z-index: 100;
}
#prev{
float:left !important;
}
#next{
float:right !important;
}<div class="sliders-container">
<a id="prev">Prev</a>
<a id="next">Next</a>
<div class="slider">
<p class="container-text">
<h1>Join US</h1>
</p>
<p class="container-text">
<strong>Можно ли присоединиться?</strong> Да, конечно. Но сначала <a href="#">прочитайте наши базовые ожидания</a> — что мы ждем от каждого вступающего в UTG.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Преданность, участие и общение</h1>
</p>
<p class="container-text">
Чем больше вы вкладываете в группу, тем больше получаете взамен. Если вы хотите играть с нами, вы должны быть готовы участвовать в жизни группы. Мёртвый груз никому не нужен. Сила группы зависит от активного участия членов сообщества. Если вы не отписываетесь в темах, когда вас просят, не участвуете в общении на форумах, в чате или не принимаете участия в играх, то вы являетесь никем для этой группы.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Зрелость</h1>
</p>
<p class="container-text">
Вы должны быть готовы серьёзно отнестись к игре. Всем дуростям своё время и место, и вы должны уметь определять это время. Помимо этого, вы должны быть способны на адекватное, нормальное общение как в игре, так и вне её.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Желание учиться, совершенствоваться и быть частью команды</h1>
</p>
<p class="container-text">ArmA — это не та игра, где вы играете сами. Успех зависит от каждого. Чтобы быть эффективным в игре, вы должны знать свою роль, структуру командования, тактику и базовые процедуры, уметь общаться, работать с напарниками и использовать своё оружие. Если вы не командный игрок и не в состоянии выдержать того, что кто-то будет отдавать вам приказы, то можете дальше не читать.
На данный момент накопилось много различной информации помимо БТП — начиная с этого текста, заканчивая обширной базой знаний по используемым модам. Вы должны быть готовы самостоятельно изучить всю необходимую информацию и разобраться в ней. Нам не нужны те, кто не способен уделить этому время.
</p>
</div>
<div class="slider">
<p class="container-text">
<h1>Требования</h1>
</p>
<p>Следующие вещи являются <i>обязательными</i> без исключения:</p>
<ul>
<li><a href="http://www.arma3.com/" target="_blank">Лицензионная версия ArmA3</a>. Естественно это также подразумевает установленный <a href="http://ru.wikipedia.org/wiki/Steam">Steam</a>, так как игра распростряняется только через него.</li>
<li><a href="http://teamspeak.com/?page=downloads" target="_blank">Клиент TeamSpeak 3</a>. Он будет нужен для общения во время игр.</li>
<li><a href="http://en.wikipedia.org/wiki/Microphone" target="_blank">Микрофон</a>. Если у вас его нет, можете зайти в любой компьютерный магазин и купить любую самую дешёвую гарнитуру.</li>
<li><a href="http://www.skype.com" target="_blank">Skype клиент</a>. Он понадобится для быстрого и комфортного общения внутри группы.</li>
</ul>
</div>
<div class="slider">
<p class="container-text">
<h1>Что дальше?</h1>
</p>
<p class="container-text">
<li>Прочитайте <a href="http://ttp2.tacticalgaming.kiev.ua/" target="_blank">базовые тактики и процедуры</a>.</li>
<li>Свяжитесь через Skype с <strong>messiahukraine</strong>.</li>
</p>
</div>
</div>Is is possible to do without using position:absoulte? Maybe some jQuery workaround?
是否可以不使用位置:absoulte?也许一些jQuery解决方法?
1 个解决方案
#1
2
You can do this using negative margins.
您可以使用负边距来执行此操作。
.slider{
float: left;
width: 100%;
margin-right: -100%;
}
Check out this jsFiddle
看看这个jsFiddle
The benefit of using this approach over position: absolute is that it doesn't remove the affected content blocks from the document’s normal flow.
使用此方法优于position的好处:绝对是它不会从文档的正常流中删除受影响的内容块。
#1
2
You can do this using negative margins.
您可以使用负边距来执行此操作。
.slider{
float: left;
width: 100%;
margin-right: -100%;
}
Check out this jsFiddle
看看这个jsFiddle
The benefit of using this approach over position: absolute is that it doesn't remove the affected content blocks from the document’s normal flow.
使用此方法优于position的好处:绝对是它不会从文档的正常流中删除受影响的内容块。