Question

我想放2个div（滑块和#besch（descritpion））。滑块在左边，我已经完成了，描述不起作用：（

我看到我必须使用两者并根据我的理解将它们设置为相同的浮点数，仍然无法正常工作

jsfiddel：

http://jsfiddle.net/h4vo3p12/

HTML：

<body>
<div id='headline'>
<h1> Test </h1>
</div>
<br>
<br>

<div class="wrapper">

  <div class="slider">

    <!-- Works with as many slides as are added in-->

    <input type="radio" name="slide-switches" id="slide_text" checked class="slide-switch">
    <label for="slide_text" class="slide-label">Slide Text</label>
    <div class="slide-content">
      <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
    </div>

    <input type="radio" name="slide-switches" id="slide_image" class="slide-switch">
    <label for="slide_image" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
    </div>

   <input type="radio" name="slide-switches" id="slide_image2" class="slide-switch">
    <label for="slide_image2" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
    </div>

  </div>

  <p>Paragraph outside slider</p>

</div>

<div id="ubba">
<p>
Überschrift:
</p>
</div>

<div id="besch">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>


</body>

CSS：

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
body, html {
    padding: 0; 
    margin: 0;
}
h1 {
    padding: 0;
    margin: 0;
}

#headline {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    text-align: center;
    color: #000000;
    padding-top: 1%;


}

#bild {

}

#bildweg {
    }

#ubba {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center; 
    margin-top: auto;
    float:left;
}
#besch {
font-family: "Open Sans", sans-serif;
    font-size: 20px;
    text-align: right;
    padding-right: 0%;  
    padding-left: 3%;
    margin-right: 0%;
    margin-left: 0%;
    float: left;
}

* {
    box-sizing: border-box;
    margin: 0px;
    height: auto;
    width: auto;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
  background: #ecf0f1;
  color: #444;
}
img {
  max-width: 100%;
  height: auto;
}
.wrapper {
  max-width: 500px;
  width: 100%;
  margin: 0 ;
}
.slider {
  background: #fff;
  position: relative;
  margin: 0;
  overflow: hidden;
  padding-bottom: 2.5rem;
  border: 0.25rem solid #95a5a6;
}
.slider::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  content: '';
  display: block;
  background: #34495e;
  height: 3rem;
}
.slide-switch {
  display: none;
}
.slide-label {
  position: absolute;
  bottom: 1rem;
  display: block;
  z-index: 5;
  height: 1rem;
  width: 1rem;
  text-indent: 1rem;
  overflow: hidden;
  background: #2980b9;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s;
}
.slide-label:nth-of-type(1) {
  left: 1rem;
}
.slide-label:nth-of-type(2) {
  left: 2.5rem;
}
.slide-label:nth-of-type(3) {
  left: 4rem;
}
.slide-label:nth-of-type(4) {
  left: 5.5rem;
}
.slide-label:nth-of-type(5) {
  left: 7rem;
}
.padded {
  padding: 1rem 2rem;
}
.slide-content {
  width: 100%;
  background: #fff;
  float: left;
  margin-right: -100%;
}
.slide-switch:checked + .slide-label {
  background: #3498db;
}
.slide-switch:not(:checked) + .slide-label + .slide-content {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.slide-switch:checked + .slide-label + .slide-content {
  animation: slide 1s;
}
@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
        #slider-image-4:target ~ .image-holder
        {
            left: -1500px;
        }

        .button-holder
        {
            position: relative;
            top: -20px;
        }

        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 10px;
            background-color: #ffffff;
        }

Answer 1

我认为跟随小提琴将解决你的问题，我只是编辑了你的小提琴，它的工作正常：）

CSS:
#besch {
font-family: "Open Sans", sans-serif;
    font-size: 20px;
    text-align: right;
    padding-right: 0%;  
    padding-left: 3%;
    margin-right: 0%;
    margin-left: 0%;
    display:inline-block;
    width:300px;
    vertical-align:top;
}
.wrapper {
  max-width: 400px;
 /*  width: 100%; */
  margin: 0 ;
  display:inline-block;
}

http://jsfiddle.net/gopal280377/h4vo3p12/1/

把2个div除了彼此

1 个答案: