1. 首页
  2. 问答
  3. 在我的具体情况下，我怎样才能让3个盒子相邻？

在我的具体情况下，我怎样才能让3个盒子相邻？

2014-11-03 162 views
0

我想把3个盒子放在一起。该框内可能有文本，图像覆盖每个框的左侧50％。在我的具体情况下，我怎样才能让3个盒子相邻？

你可能想知道为什么我在这里问它在哪里有很多其他的在线帮助。原因是它不适用于我的具体情况。每当我创建任何div框或段落时，它下面的所有内容都会中断（不会像之前设置的那样）。如果你看一下我的代码，你会发现我有这行代码：<marquee behavior="alternate">We are coming soon, please check back later.</marquee>

这marquee工作正常，但如果我做任何段落而不是（或包装与格盒段）下只是它的有序列表分解并放在彼此之下。这意味着可以制作盒子或段落，但不会让其他内容（在它们下面）保持不变。

[希望我能好好解释一下我的问题，如果不是：我的道歉] 你可以看到我的工作生活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 /> 
[email protected] 

</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: [email protected]<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; 
}

来源

2014-11-03 Ryan

+0

您需要张贴*不*工作的代码。 – Pointy 2014-11-03 16:57:50

+1

..以及制作清单的可怕方式。并且''标记已经停用 - https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee – 2014-11-03 17:00:18

+0

Paulie_D，请问您有什么建议？ – Ryan 2014-11-03 17:17:04

回答

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>

来源

2014-11-03 17:01:36 slashsharp

+0

它不起作用。和之前一样。它再次分解内容。看到这里：http://jsfiddle.net/7373wqya/ – Ryan 2014-11-03 17:14:48

+0

我终于解决了。我列表的方式要适当。感谢Paulie_D – Ryan 2014-11-03 17:33:43

相关问题

 相关问题