Question

我需要将两个相似的图像浮动到部分容器的左侧和右侧，而不会影响Div容器。我需要它们占据绿色四四方方的左侧和右侧，而不影响红色框的位置或重叠。请帮助。继承我的代码：

HTML：

<!Doctype html>
<html  lang="eng">
<head>
 <meta charset="utf-8">
 <title>Envy</title>
 <link rel="stylesheet" href="Envy.css">
</head>
<div id="M_wrap">
<body>

            <div id="F_head">
           <header id="M_head">Nhere</header> 
           <nav id="M_nav">
             <ul>

                 <li class="Esec"><a href="#">New in stock</a></li>
                 <li><a href="http://www.w3schools.com/css/css_padding.asp">Men</a></li>
                 <li><a href="#">Women</a></li>
                 <li><a href="#">Children</a></li>
                 <li><a href="#">Accessories</a></li>
             </ul>
           </nav>
           </div>
           <section id="M_section">
                <img class="SE1" src="Bg2.jpg">
                <img class="SE2" src="Bg2.jpg">
              <div id="S_wrap">

              </div>
           </section>


</body>
 </div>
</html>

的CSS：

body{

}
#M_wrap{
background-size:cover;
width:70em;
margin:.8em auto;

}

#F_head{
width:100%;
margin:.2em auto;
}

#M_head{
color:#000000;
font: Italic bold 80px/50px "Times New Roman" Arial, Tamoha;
text-align:center;
text-shadow:2px 2px  #33ff00;
text-decoration:underline;

}
 #M_nav{
height:3em;
width:37.5em ;
margin:2em auto;
background-color:black; 
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
word-spacing:80px;
text-align:center;              
font:Italic bold 30px/20px Times "Times New Roman", tamoha;
}
#M_nav ul li{
display:inline;
}

li.Esec{
word-spacing:0px !important;
}


#M_nav li a {
display:inline-block;
padding: 0px 15px;
font-weight:bold;
border-right: 1px solid #ccc;
}
#M_nav a:link{
color:white;
font:Italic bold 30px/40px Times "Times New Roman", tamoha;
text-decoration:none;
}

#M_nav a:hover {
color:white;
text-shadow: 2px 2px black;
text-decoration:underline;
color:#33ff00 !important;
}

#M_nav a:active{
color:red;
}


#M_nav a:visited{
color:white;
text-shadow:2px 2px black;
}

#M_section{
margin:-3.75em 0 0 0;
width:100%;
height:50em;
border-style:solid;
border-color:#33ff00;
}

#S_wrap{
 margin:3em auto;
 width:80%;
 height:85%;
 position:center;
 border-style:solid;
 border-color:red;


}

Answer 1

某事like this？

以下是我改变的CSS的一部分：

.SE1 {
    float:left;
}
.SE2 {
    float:right;
}

#S_wrap{
    margin:0 auto 3em auto;
    /* didn't touch rest of rules you have for this ID */
}

浮动图像而不影响容器

1 个答案: