创建响应式html / css图像滑块

Question

我的目标是让html / css滑块响应。目前，当宽度大约是标准iPhone的宽度时，滑块图像会对齐，因此从图像滑块下方开始的文本也是如此。我喜欢将滑块保持为一个单独的盒子＆＃34;始终占据整个宽度，以便在缩放页面时文本不会跳转。我认为这可以通过将整个滑块元素包装在div中并将所述元素的宽度设置为100％来实现，但遗憾的是没有。

我现在尝试使用滑块图像，我最初的想法是使用百分比，因为我可以在所有6个空格之间设置4％的间隙，并且所有滑块图像的宽度为16％，但是当我向滑块添加百分比宽度时，它无法正确应用。

约束：我无法在外部css中加载（是的，使用bootstrap会很容易），我不能使用Javascrip。只有css和html。

我在鬼博客页面上这样做，因此有限制。

看看这里的代码：

＆＃13;

＆＃13;

<style>
* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 0 0 4.6%;
  border: 3px solid #999;
  float: left;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}
</style>

＆＃13;

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于滑块标签，请尝试display: inline-block;而不是float: left;：

.slider label {
    margin: 4.6% 0 0 4.6%;
    border: 3px solid #999;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

由于float: left;导致下面的元素向右填充空格，因此根据情况可能会产生麻烦。

另一种选择是在样式表中添加一些css，将滑块元素设置为clear:both上的:after（这会删除后面元素的浮动效果。）

.slider:after {
    content: '';
    display: block;
    clear: both;
}

以下是display:block;上float代替.slider label的示例：

* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 0 0 4.6%;
  border: 3px solid #999;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.

Answer 2

你需要

.slider {
  overflow: hidden;
}

...让它扩展到包括它漂浮的孩子。否则，其高度将不包括浮动元素，使滑块填充标签周围的任何空格后的内容。

* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
  overflow: hidden;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 0 0 4.6%;
  border: 3px solid #999;
  float: left;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.

但是，在标签上使用float:left不是一个非常敏感的友好解决方案，因为它们不会以特定宽度为中心。我会选择一个flexbox解决方案来解决这个问题：

.slider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.slider label {
  margin: 4.6% 15px 0;
}

* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 15px 0;
  border: 3px solid #999;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}
</style>

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.

正确居中的另一个选择（如果您需要支持古老的浏览器）是在标签上使用display:inline-block;，从中移除float并将text-align: center添加到.slider ：

.slider {
  text-align: center;
}
.slider label {
  margin: 4.6% 15px 0;
  display: inline-block;
  /* don't forget to remove float:left; ! */
}

另外，在部署之前，请记住properly prefix CSS。在过滤器框中设置> 0%，以获得最大的浏览器兼容性。