5
के नीचे प्रकट करने के लिए कैसे मजबूर करें मेरे पास 2 divs हैं जो दाईं ओर दिखाई देते हैं, और दूसरा बाईं ओर दिखाई देता है।div को अन्य div
हालांकि, जब मैं सही div के नीचे एक और div जोड़ने की कोशिश करता हूं, तो मुझे बाएं div के बाईं ओर या बाएं div के बाईं ओर मिलता है। यहाँ
और क्या मैं करना चाहते है:
यहाँ मैं क्या है
मैं कई तरीकों tryied में शामिल हैं:
- स्पष्ट: छोड़ा; या स्पष्ट:
- सूची-शैली दोनों: कोई नहीं;
- उपयोग की स्थिति: रिश्तेदार;
- भी कि 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, 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 { \t
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 class="body_wrap">
<div class="main_outer">
<div class="main_top"></div>
<div class="main_mid">
<!-- content -->
<div id="bookcontent">
<center>
<div id="content">
<div id="menu">
<div class="titleimg"></div>
<ul>
<li><a class="link" href="./pages/0.html" target="content">Test 1</a></li>
<li><a class="link" href="./pages/1.html" target="content">Test 2</a></li>
<li><a class="link" 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 class="buttons" type = "button" value = "Previous" /></span>
<span style="float:left"><input class="buttons" type = "button" value = "Next" /> </span>
</div>
<!--/ content -->
</div>
<div class="main_bot"></div>
<!--/ container -->
बदलता है आप सबसे अच्छा आदमी कर रहे हैं! – StackBuck