html - 设置页面换行中的图像放置？

Question

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

提前致谢!

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