jquery - 如何将列移动到容器中文档的右侧

Question

我正在尝试将绿色框移到容器中 body 的右侧。这是我想要实现的目标的图片。

(黄色是正文)。这就是我得到的

我的代码:

.wrapper {
  width: 680px;
  background: yellow;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  height: 200px;
}

.col {
  float: left;
  margin: 0 10px;
  height: 200px;
}

.col-left {
  background: red;
  width: 27%;
}

.col-right {
  background: green;
  width: 64%;
}

<div class="wrapper">
  <div class="container">
    <div class="col col-left"></div>
    <div class="col col-right"></div>
  </div>
</div>

https://jsfiddle.net/zdL2122h/

我可以使用 jQuery 获取右边距并将绿色框移动到容器左侧。但我想用 CSS 来做。我怎样才能实现它？

更新: 这是我得到的: 我想将图像向右移动，文本和图像位于列中，并且位于与标题相同的容器中(位于容器中)。我需要文本与标题对齐，图像右侧没有空格。因此，当我更改屏幕尺寸时，文本仍会对齐。怎么做？

Answer 1

我想我理解你的问题。

这里有一个建议:

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 0
}

.img-leak {
  position: relative;
  z-index: 0;
}

.img-leak-content {
  width: 50%;
}

.img-container {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
}


/* Extra CSS */

header {
  background: red;
  color: white;
  padding: 10px 0;
}

.img-leak {
  background: green;
  color: white;
  padding: 10px 0;
}

.img-container {
  background: blue;
}

.img-leak-content {
  background: gray;
}

<header>
  <div class="container">
    <h1>Header</h1>
  </div>
</header>
<section class="img-leak">
  <div class="img-container">your image here as background</div>
  <div class="container">
    <div class="img-leak-content">
      <h2>lorem ipsum</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    </div>
  </div>
</section>

我所做的是将图像绝对定位在该部分的右侧 (50%)。

然后，我将内容包装在容器内的一个宽度为 50% 的 div 上。

这样，文字就不会进入图片区域，图片也不会进入文字。