在我的具体情况下，如何将3个盒子彼此相邻？

时间：2014-11-03 16:54:48

标签： javascript jquery html css

我想把3个盒子放在一起。盒子里面可能有文字，图片覆盖在每个盒子的左边50％。

你可能想知道为什么我在这里问其他网上有很多帮助。原因是它在我的特定情况下不起作用。每当我制作任何div框或段落时，它下面的所有内容都会分解（不会保持与之前设置的相同）。如果你查看我的代码，你会发现我有这行代码：<marquee behavior="alternate">We are coming soon, please check back later.</marquee>

marquee工作正常，但是如果我创建任何段落而不是（或用div框包装段落），那么它下面的有序列表就会分解并放在彼此之下。这意味着可以制作方框或段落，但它们不会让其他内容（在它们下面）保持不变。

[希望我能够正确解释我的问题，如果没有：我的道歉]  你可以看到我的工作here，但我会在这里粘贴我的代码。附件显示了我想放置盒子的确切位置。

enter image description here

.HTML：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>7Seas Redovisning</title>
<link rel="stylesheet" href="style.css">

</head>



<body>

<div id="big_wrapper">

<header id="top_header">
<h1><img src="img_akin/7seas.jpeg" id="logo" alt=""/><span class="header_name"><span class="seven">7</span>Seas Redovisning</span></h1>
<p>

<span class="mob_tele">Mob: 076-9516926 <br />
Tel: 040-133403</span><br />
info@7seasredovisning.se

</p>

</header>

<nav id="top_menu">


</nav>
<div id="new_div"> <!--only the main content-->
<section id="main_section">
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
<div class="img_wrap">
<img src="img_akin/image_1st_body.jpg"  width="650" height="312" alt=""/>
</div>
<ol>
<li>

<span class="style_number">1.</span> INKOMSTDEKLARATION<br /><br /><br />
<span class="style_number">2.</span> MOMSDEKLARATION<br /><br /><br />
<span class="style_number">3.</span> BOLAGSBILDNING<br /><br /><br />
<span class="style_number">4.</span> EKONOMI KONSLUT<br /><br /><br />
<span class="style_number">5.</span> LÖPANDE BÖKFÖRING
</li>


<li>

&nbsp;&nbsp;<span class="style_number">6.</span> BOKSLUT & ÅRSREDOVISNING<br /><br /><br />
&nbsp;&nbsp;<span class="style_number">7.</span> SKATTEDEKLARATION<br /><br /><br />
&nbsp;&nbsp;<span class="style_number">8.</span> LÖNEADMINISTRATION<br /><br /><br />
&nbsp;&nbsp;<span class="style_number">9.</span> FAKTURERING<br /><br /><br />
&nbsp;&nbsp;<span class="style_number">10.</span> ONE MORE
</li>
</ol>

</div>

<footer id="the_footer">
<ul>
<li>
© 7 seas Redovisning <br />                                         

En del av 7seas Money Transfer KB<br />                 
F-skatt registrerat  <br />                                         
Org, Nr: 969756-4079 <br />   
SEB Företagskonto: 5502-1030132<br />
BG: 102-5006

</li>


<li>
Besökadress: <a href="https://www.google.se/maps/place/Skomakarebyn+8,+218+41+Bunkeflostrand/@55.5592313,12.9325061,3a,75y,153.78h,90t/data=!3m4!1e1!3m2!1sufqG4dOye4Igl8W2ATJPgg!2e0!4m2!3m1!1s0x4653a718b0946da5:0xd60c6ee131582f21!6m1!1e1" title="See on Google Map">Skomakarebyn 8E<br /> 
218 41 Bunkeflostrand</a><br /> 
Malmö, Sweden <br />  
Follow us on FB <!-- SMARTADDON BEGIN -->
<br />
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>

<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('www.7seasredovisning.se','bookmarks')"><img alt="Share" src="http://s1.smartaddon.com/s8.png" border="0" /></a>

                        <br />Designed & Developed by <a href="http://jabiralfatah.com/" title="Visit my Website">Jabir Al Fatah</a><br />
                        Copyright @ 2014 <a href="http://dhbangladesh.com/"title="Visit DH BANGLADESH">DH BANGLADESH in SWEDEN.</a>

</li>

<li>
Tel: 040-133403<br />
Mob: 076-9516926<br />
e-Mail: info@7seasredovisning.se<br/>
<a href="http://7seasredovisning.se/">www.7seasredovisning.se</a><br/>
<span id="webstat">
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script> 
<script type="text/javascript">
<!--
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>"); 
-->
</script>
</span>
<!-- Slut WEBSTAT.SE kod -->

</li>

</ul>


</footer>

</div>

</body>


</html>

.CSS：

*{
margin:0px;
padding:0px;
}
#top_header h1 {

font:bold 4em Fantasy;

margin-top:-20px;

color:#006400;
text-shadow:2px 2px 2px orange;

}

.header_name{
margin-left:80px;

}

.seven{
color:orange;
font-size:1.2em;
text-shadow:2px 2px 2px #006400;
}
#top_header p {

margin-top:-100px;

color:#00008B;
float:right;
font-family:Euphemia;

}

.mob_tele{
font-size:12.5px;
}

h2{

font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;

}
body{
width:100%;
display:-webkit-box;
display:-o-box;
display:-moz-box;
/*
display:-ms-box;
*/
 display:-ms-flexbox;
   -ms-flex-pack:center;
   -ms-flex-align:center;


box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
-o-box-pack:center;
background-color:#E6E6FA;


}


#big_wrapper{
max-width:1200px;
margin:20px auto;


display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
background-color:white;
-webkit-box-shadow:  0 0 2px 2px gray;

}


#top_header{

border:3px soild gray;
padding:20px;

}



#logo{
padding-top:20px;

}

#top_menu{
border-top: 5px solid #20B2AA;
border-radius:4px;
box-shadow:2px 2px 2px #424242;

color:black;
}


#new_div{
display:block;
display:-moz-box;
display:-o-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;


}

#main_section{
/*
border: 1px solid blue;
*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
/

}

#main_section li{

margin-left:12px;
display:inline-block;

font-family:Euphemia;

font-weight:bold;
/*
color:#D2691E;
*/
color:green;


}
.style_number{
font: italic 1.2em Georgia, Times, serif;
font-weight:bold;
color:#4169E1;
}


#main_section marquee{
font-family:Segoe Print;
font-size:40px;
font-weight:bold;
margin-bottom:40px;
color:#B22222;
}

.img_wrap{
float:right;
position:relative;

}

.img_wrap::before{
   background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
    background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
    background-image: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
    background-image: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
    background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
    content:"\00a0";

    top:0px;
    left:0px;
    height:100%;
    width:100%;
    position:absolute;

}

#the_footer{
/*
text-align:center;
*/
background:#F0F8FF;
/*
padding:20px;
*/
border-top:2px solid green;

}
#the_footer li{
list-style:none;
display:inline-block;

padding:40px;
margin-left:35px;


font-family:Euphemia;
font-size:13px;
}
#the_footer a{
text-decoration: none;

}
#the_footer a:hover{
text-decoration: underline;
}

1 个答案:

答案 0 :(得分：0)

这是一个让你入门的例子。

.box {
  display: block;
  float: left;
  margin: 0 10px;
  border: 1px solid black;
}
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

相关问题
最新问题