Question

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

我试图获得75％左栏，25％右列，此处的红色文字应该在右边，而不是重叠灰色文字：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您应该更改标记 - 将grey内容包装到div（left）并提供所需的宽度（75％到left和25％到marker ）。

见下面的演示：

.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>

Answer 2

将extension UIView { func screenshot() -> UIImage { if(self is UIScrollView) { let scrollView = self as! UIScrollView let savedContentOffset = scrollView.contentOffset let savedFrame = scrollView.frame UIGraphicsBeginImageContext(scrollView.contentSize) scrollView.contentOffset = .zero self.frame = CGRect(x: 0, y: 0, width: scrollView.contentSize.width, height: scrollView.contentSize.height) self.layer.render(in: UIGraphicsGetCurrentContext()!) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext(); scrollView.contentOffset = savedContentOffset scrollView.frame = savedFrame return image! } UIGraphicsBeginImageContext(self.bounds.size) self.layer.render(in: UIGraphicsGetCurrentContext()!) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image! } }设置为.content，然后设置为width: 100%，并将其设置为.marker，并将width: 25%的下一组<p>括起来将宽度设置为75％。

随着你的小提琴，

这是html

<div>

和css

<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>

Answer 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>

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

3 个答案: