当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Can't get my Aside element to format properly

问题描述:

I am unable to get my aside element to align properly with the rest of my page. It sits above the main element and spills into the header. How do I fix that?

Here's what it looks like on the page:

Here's the CSS Style code I'm using:

* {

margin:0;

padding:0;

}

body {

font-size:1.1em;

font-family: Arial, Helvetica, sans-serif;

background-color:darkseagreen;

}

header {

padding: 1%;

margin-bottom: 3%;

text-align: center;

font-size:2em;

font-family: Arial, Helvetica, sans-serif;

text: white;

background-color: #4EEE94;

}

aside {

width: 25%;

padding: 0.5%;

margin: 0 5px 5px 0;

background-color: #1C86EE;

float: right;

border-radius: 20px;

position: relative;

min-height: 100%;

display: block;

}

#main {

width: 446px;

margin-right: 27%;

padding: 0.5%;

background-color: #EE6363;

text: white;

position: relative;

border-radius: 4%;

}

.map {

padding: 2em;

margin: 3em auto 3em auto;

position: relative;

display: block;

text-align: center;

width: 95%;

.image {

padding: 5%;

margin: 4em;

float: left;

position: relative;

left: 10px;

top: 15px;

}

}

div {

box-shadow: 10px 10px 5px #888888;

border: 2px solid;

border-radius: 25px;

}

nav ul li {

margin-right: 1em;

display: inline;

list-style-type: none;

}

nav li a {

padding: 1em;

color: white;

text-decoration: none;

}

nav li a:hover {

color: yellow;

text-decoration: underline;

}

footer {

margin: 0.5% 27% 0 0;

border-top: solid thick teal;

padding: 0.5%;

background-color: lime;

}

网友答案:

first issue with your css remove the braces after .image class.

.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}

second thing use px or % or em do not use all (recommended) .

Third use id something like this

<div id="xyz"></div>

Not <div id="#xyz"></div> # is the css selector

also do not use multiple id like <div id="abc xyz"></div> u cannot use multiple id's use class instead of <div class="abc xyz"></div>

分享给朋友:
您可能感兴趣的文章:
随机阅读: