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

Question

我正试图将绿色框移到容器上的正文中。这是我想要实现的目标。

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

我的代码：

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

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

Answer 2

使用Flexbox！您可以轻松定义列的顺序

＆＃13;

＆＃13;

.wrapper{
  width: 680px; 
  background:yellow;
}
.container {
  display: flex; /* <--- This turns it into a flexbox container */
  max-width: 480px;
  margin: 0 auto;
  height: 200px;
}
.col {
  margin: 0 10px;
  height: 200px;
}
.col-one {
  background:red;
  width: 27%;
  order: 1; /* <--- This changes the order */
}
.col-two {
  background: green;
  width: 64%;
  order: 0; /* <--- This changes the order */
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="col col-one"></div>
    <div class="col col-two"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我不知道我的问题是否正确，但我认为这样的事情

<div class="bod">
  <div class="green"></div>
   <div class="red"></div>
</div>

https://jsfiddle.net/usym878a/1/

Answer 4

试试这个：

.wrapper{
width: 680px; 
height: 200px;
background:yellow;
margin : 0;  
padding : 0;
}
.container {
  max-width: 480px;
  margin: 0 auto;
  height: 200px;
  float: right;
  padding : 0;
}
.col {
  float: left;
  height: 200px;
}

.col-left {
  background:red;
  width: 130px;
  margin: 0 10px;
}
.col-right {
  background: green;
  width: 330px;
  float: right;
}

<div class="wrapper">

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