两个div并排，右侧是固定位置的盒子

I'm trying to use CSS to put two columns side by side, the right side will be a box with a fixed position, so it stays in place when you scroll. I've come close, but the boxes overlap so something is clearly wrong.

我正在尝试使用CSS将两列并排放置，右侧将是一个具有固定位置的盒子，因此当您滚动时它会保留在原位。我已经接近了，但盒子重叠，所以有些东西显然是错的。

I'm trying to get something like 75% left column, 25% right column, the red text here should be to the right, not overlapping the grey text:

我试图获得75％左列，25％右列，这里的红色文本应该在右侧，而不是重叠灰色文本：

http://jsfiddle.net/Jayx/vFQpX/2/

http://jsfiddle.net/Jayx/vFQpX/2/

.content {
  background: #ccc;
  max-width: 500px;
  margin: 50px auto;
  position: relative;
}

.marker {
  position: absolute;
  width: 200px;
  right: 0;
}

.fixedmarker {
  background: #f00;
  color: #fff;
  position: fixed;
  width: 200px;
}

<div class="content">
  <div class="marker">
    <div class="fixedmarker">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
</div>

3 个解决方案

#1

You should change your markup - wrap the grey content into a div (left) and give the required widths (75% to left and 25% to marker).

你应该改变你的标记 - 将灰色内容包装成div（左）并给出所需的宽度（左边75％，标记25％）。

See demo below:

见下面的演示：

.content {
  background: #ccc;
  max-width: 500px;
  margin: 50px auto;
  position: relative;
}
.marker {
  position: fixed;
  width: 25%;
  right: 0;
}
.fixedmarker {
  background: #f00;
  color: #fff;
}
.left {
  width: 75%;
}

<div class="content">
  <div class="marker">
    <div class="fixedmarker">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
        nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
    </div>
  </div>
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  </div>
</div>

#2

Setting .content to width: 100% and as of the .marker and set it to width: 25% and enclose the the next set of <p> with a <div> to set the width with 75%.

将.content设置为width：100％并将其设置为.marker并将其设置为width：25％并使用

将下一组

括起来以将宽度设置为75％。

With your fiddle given,

随着你的小提琴，

this is the html

这是html

<div class="content">
    <div class="marker">
        <div class="fixedmarker">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
        </div>
    </div>
    <div style="width: 75%">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    </div>
</div>

and as of the css

而且作为css

.content{
    background:#ccc;
    max-width:500px;
    margin:50px auto;
    position:relative;
    width: 100%;
}

.marker{
    position:absolute;
    width:25%;
    right:0;
    
}

.fixedmarker{
    background:#f00;
    color:#fff;
    position:fixed;
    width:200px;
}

#3

body {margin: 0;}
.content {
  background: #ccc;
  max-width: 500px;
  margin: 50px auto;
  position: relative;
  display: flex;
}

.marker {
  flex: 3;
}

.fixedmarker {
  flex: 1;
}

.fixedmarkerInner {
  background: #f00;
  color: #fff;
  position: fixed;
}

<div class="content">
  <div class="marker">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ali quam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  </div>
  <div class="fixedmarker">
    <div class="fixedmarkerInner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
        nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
    </div>
  </div>
</div>