但是,当我尝试在右侧div下添加一个div时,我会在左侧div或左侧div的左下方获取它.
这是我有的：
这就是我想要实现的目标：
我试过几种方法包括：
>清楚：左;或明确：两者
> List-style：none;
>使用位置：相对;
>也看到了method,但无法弄清楚这一点
我在stackoverflow搜索时看到的另一种方法却没有成功.
这是现场直播：JSfiddle
我该如何解决这个问题？
/*============================================================================================*//* 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,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;} <Title>Test</Title><div > <div > <div ></div> <div > <!-- content --> <div ID="bookcontent"> <center> <div ID="content"> <div ID="menu"> <div ></div> <ul> <li><a href="./pages/0.HTML" target="content">Test 1</a></li> <li><a href="./pages/1.HTML" target="content">Test 2</a></li> <li><a href="./pages/2.HTML" target="content">Test 3</a></li> </ul> </div> <div ID="menu"> This is the iframe </div> <div ID="menu2"> <span align="right"><input type = "button" value = "PrevIoUs" /></span> <span ><input type = "button" value = "Next" /> </span> </div> <!--/ content --> </div> <div ></div> <!--/ container -->解决方法 您可以尝试menu2：
float: right; clear: both;
这是一个工作小提琴
https://jsfiddle.net/qxLk4afk/2/
以上是内存溢出为你收集整理的html – 如何强制div出现在另一个div下面全部内容，希望文章能够帮你解决html – 如何强制div出现在另一个div下面所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）