html获取下一级div,html – 如何强制div出现在另一个div下面

我有两个div,一个出现在右边,另一个出现在左边.

但是,当我尝试在右侧div下添加一个div时,我会在左侧div或左侧div的左下方获取它.

这是我有的：

这就是我想要实现的目标：

我试过几种方法包括：

>清楚：左;或明确：两者

> list-style：none;

>使用位置：相对;

>也看到了method,但无法弄清楚这一点

我在stackoverflow搜索时看到的另一种方法却没有成功.

我该如何解决这个问题？

/*============================================================================================*/

/* 1. GENERAL TYPOGRAPHY */

/*============================================================================================*/

/*----------------------------------------------*/

/* Global Reset */

/*----------------------------------------------*/

body {background:url(../img/body_image_1.png) top no-repeat}

html, body, div, span, iframe,pre, a, img, strong, center, ul, li, footer, header,menu {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline; }

footer, header, menu {

display: block;}

body {

line-height: 1; }

ol, ul {

list-style: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }

img { max-width:100% !important}

/*----------------------------------------------*/

/* General Styles */

/*----------------------------------------------*/

body {

font-family: 'Copse', Georgia, Times, serif;

color:#8c8c8c;

font-size:14px;

line-height:1.4em;

position:relative}

.body_wrap {

width:100%;

background-position:center 270px;

background-repeat:no-repeat;

overflow:hidden;}

::-moz-selection {

background: #f67320;

color: #fff;

text-shadow: none}

::selection {

background: #f67320;

color: #fff;

text-shadow: none}

/* Typography

======================================================== */

strong { font-weight: bold; }

.sidebar mark {

background:#ffffff;

color:#ff8a00 !important;

display:block;

padding:5px;

font-weight:normal;

font-size:110%;}

/* Links

======================================================== */

a, a:visited { color: #aa62bb; text-decoration: none; outline:none; }

a:hover, a:focus { color: #f86000; }

/* Lists

======================================================== */

ul { list-style: none outside; }

/*============================================================================================*/

/* 2. SITE STRUCTURE */

/*============================================================================================*/

.main_outer {

width:1350px;

margin:0 auto 14px auto;

position:relative;}

.main_top {

height:30px}

.main_bot {

height:66px}

.main_mid {

padding:0 59px; /* width 496px */

min-height:670px}

/*----------------------------------------------*/

/* Middle content */

/*----------------------------------------------*/

.content {

width:100%;

padding-bottom:17px;

position:relative;

z-index:1}

/*----------------------------------------------*/

/* Footer */

/*----------------------------------------------*/

footer {

width:100%;

clear:both;

background:url(../img/opacity_45.png)}

footer .container {

min-height:30px;

padding:40px 0 20px;

color:#acacac;

width:496px;

font-family: 'Source Sans Pro', Tahoma, sans-serif;

font-size:12px;

text-align:center;}

.copyright .icon_heart {

display:inline-block;

width:16px;

height:14px;

overflow:hidden;

text-indent:-500px;

margin:0 5px;

line-height:14px;

top:0.2em;

position:relative;}

.copyright {

line-height:1.3em;

font-weight:bold;}

.copyright a {

color:#ccc !important}

.copyright a:hover {

color:#fff !important}

/*----------------------------------------------*/

/* Custom changes */

/*----------------------------------------------*/

.title {font-family: sans-serif; font-size: 20px; font-weight: bold; color: black; text-align: center; padding-bottom: 25px; padding-top: 15px;}

.titleimg {background-image: url(../img/logo.png); background-repeat: no-repeat; width: 200px; height: 120px; background-position: center;background-size: contain; margin: auto;}

#menu {

font-family: 'Arimo', sans-serif;

direction: rtl; text-align: right; float: right;

width: 250px;

border-radius: 15px;

padding: 15px;

margin-top: 7px;

border: 7px solid #fbdd63;

background-color: white;}

a.link {font-size: 15px; color: black; padding 5px;}

a.link:hover { background-color: #fde499; padding-left: 10px; }

#bookcontent { float: left; }

.frame {width: 300px; height: 320px; position: fixed; }

.maincontent {font-family: sans-serif; font-size: 16px; color: black; background-color: white; box-shadow: 3px #000;}

/* Content Text */

.fullcontent {

direction: rtl;

border-radius: 15px;

padding: 15px;

background-image: url(../img/copity-big.png);

border: 7px solid #fbdd63;

position: fixed;

}

li.first {font-weight: bold; margin-top: 7px; padding-bottom: 2px;}

li.second {list-style-type: square; margin-right: 20px;}

li.third {list-style-type:decimal; margin-right: 20px;}

.bigtitle {font-family: 'Rubik', sans-serif; font-size: 40px; color: black; font-weight: bold; padding-top: 25px; padding-bottom: 20px; }

.textcontent {font-family: sans-serif; font-size: 18px; color: black; text-align: right; padding-bottom: 20px; }

.boldy {font-weight: bold;}

#copyrighted { clear: both; position: absolute;}

img.desc {width: 350px; height: 250px; float: left; margin-left: 45px; padding-right: 15px;}

.textop { background-image:url(../img/blue.png); width: 180px; height: 50px; float: left; margin-left: -30px; }

.ontop { font-family: sans-serif; font-size: 16px; font-weight: bold; margin-right: 7px; margin-top:13px; color: white; text-shadow: 1px 1px 1px #000;}

.center {margin: 0 auto; padding-top: 15px; padding-bottom: 25px;}

#menu2 {

display: block;

font-family: 'Arimo', sans-serif;

direction: rtl; text-align: right; float: right;

width: 250px;

border-radius: 15px;

padding: 15px;

margin-top: 7px;

border: 7px solid #fbdd63;

background-color: white;

}

input.buttons {padding: 2px; padding-left: 10px; padding-right: 10px; border: 0px; background-color: #fed40e; color: white;}

.footer {margin: 0 auto; background-image:url(../img/footer.png); width: 750px; height: 180px; margin-top: 30px; }

.footontop-left {width: 590px; font-family: sans-serif; float: left; font-size: 18px; font-weight: bold; margin-right: 7px; color: black; text-shadow: 1px 1px 1px #fff;}

.footontop-right-cart {auto; background-image:url(../img/icons/cart140x140.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}

.footontop-right-israel {auto; background-image:url(../img/icons/israel.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}

.footontop-right-crown {auto; background-image:url(../img/icons/crown.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}

.karikatura { width: 650px; height: 230px;}

Test

• Test 1
• Test 2
• Test 3

This is the iFrame