设置页面包装中的图像放置？

Question

我想知道是否可以以某种方式设置页面换行，以便宽度是图像和文本框如何浮动以及左/右/上/下命令的最大限制。下面的图片澄清了我的问题，因为我的编码词汇目前非常有限：

提前谢谢！

Answer 1

看看这里：

http://jsfiddle.net/gh129L5b/19/

#container {
  background-color: gray;
  width: 100%;
  height: 100%;
}

#wrapper {
    width: 80%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    max-width: 48em;
}

#red {
    height: 100px;
    width: 100px;
    background-color: red;
    float:left;
    margin-top: 70%;
}

#blu {
    height: 100px;
    width: 100px;
    background-color: blue;
    float:right;
    margin-top: 40%;
    margin-right: 5%;
}

或者，如果您想使用 position 属性而不是 float ：

http://jsfiddle.net/gh129L5b/28/

#container {
  background-color: gray;
  width: 100%;
  height: 100%;
}

#wrapper {
    width: 80%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    max-width: 48em;
    position: relative;
}

#wrapper > div {
    position: absolute;
}

#red {
    height: 100px;
    width: 100px;
    background-color: red;
    bottom: 20%;
}

#blu {
    height: 100px;
    width: 100px;
    background-color: blue;
    top: 40%;
    right: 5%;
}