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

debugcn 发表于 Dev

左拉克斯

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

（黄色是身体）。这就是我所拥有的

我的代码：

.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 来做到这一点。我怎样才能实现它？

更新：这是我所拥有的：我想将图像向右移动，文本和图像在列中，并且在与标题相同的容器中（它在容器中）。我需要将文本与标题对齐，并且图像右侧没有空间。因此，当我更改屏幕大小时，文本仍会对齐。怎么做？

麦克斯韦

我想我明白你的问题。

这是一个建议：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。