我似乎无法在我的网页设计中定位我想要的图像

时间：2017-09-17 19:28:39

标签： html css

我想将第二个图像（IMG_5347_small.jpg）放在.mainHeader img中，以便它始终显示在与内容对齐的屏幕右侧。 我怎么做？ 我搜索谷歌这个但没有发现任何有用的东西。 希望你能帮忙

＆＃13;
＆＃13; 
body {
    background-image: url('img/tape-measure.jpg');
    color: #000305;
    font-size: 87.5%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
    
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

.mainHeader img {
    max-width: 30%;
	height: auto;
}

.mainHeader img .Margrit {
	max-width: 30%;
	height: auto;
}

.mainHeader nav {
    background-color: #9cb34f;
	height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainHeader nav ul li {
    display: inline;
    float: left;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}

.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainContent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
}

.content {
    width: 70%;
    float: left;
}

.topcontent {
    background-color: #9cb34f;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.bottomcontent {
    background-color: #9cb34f;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.post-info {
    font-style: italic;
    color: #fff;
    font-size: 90%;
}

.top-sidebar {
    width: 21%;
    float: left;
    background-color: #9cb34f;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 2% 3%;
}

.middle-sidebar {
    width: 21%;
    float: left;
    background-color: #9cb34f;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;

}

.bottom-sidebar {
    width: 21%;
    float: right;
    background-color: #9cb34f;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;
}

.top-sidebar h2, .middle-sidebar h2, .bottom-sidebar h2 {
	color: #CF5C3F;
}

.mainFooter {
    width: 100%;
    height: 40px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #9cb34f;
    margin: 2% 0;
}

.mainFooter p {
    width: 92%;
    margin: 10px auto;
    color: #fff;
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
    .body {
        width: 90%;
        font-size: 95%;
    }
    
    .mainHeader img {
        width: 100%;
    }
    
    
    .mainHeader nav {
        height: 160px;
    }

    .mainHeader nav ul {
        padding-left: 0;
    }

    .mainHeader nav ul li {
        width: 100%;
        text-align: center;
        
    }

    .mainHeader nav a:link, .mainHeader nav a:visited {
        padding: 10px 25px;
        height: 20px;
        display: block;
    }

    .content {
        width: 100%;
        float: left;
        margin-top: 2%;
    }
    
    .post-info {
        display: none;
    }

    .topcontent {
        background-color: #fff;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2%;
        margin-bottom: 4%;
    }

    .bottomcontent {
        margin-top: 3%;
    }
    
    
    .top-sidebar, . middle-sidebar, .bottom-sidebar {
        width: 94%;
        margin: 2% 0 2% 0;
        padding: 2% 3%;
    }
}
＆＃13; 
<!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="body">
		<header class="mainHeader">
			<img src="resources/img/Content_variation_800_e.png" alt="Logo">
			<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			
			<nav>
				
				<ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
		</header>
		
		<div class="maincontent">
			<div class="content">
				<article class="topcontent">
					<header>
						<h2><a href="#" title="First post">First post</a></h2>
					</header>
                    
                    <footer>
                        <p class="post-info">Diese Seite ist unter Bearbeitung.</p>
                    </footer>
                    
                    <content>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </content>
                
                </article>
                
                <article class="bottomcontent">
					<header>
						<h2><a href="#" title="Second post">Second post</a></h2>
					</header>
                    
                    <footer>
                        <p class="post-info">Diese Seite ist unter Bearbeitung.</p>
                    </footer>
                    
                    <content>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </content>
                
                </article>
                
            </div>
		</div>
        
        <aside class="top-sidebar">
            <article>
                <h2>Top sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
        
        <aside class="middle-sidebar">
            <article>
                <h2>Middle sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
        
        <aside class="bottom-sidebar">
            <article>
                <h2>Bottom sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
        
        <footer class="mainFooter">
            <p>Copyright &copy; <a href="#" title="couture-anni">couture-anni.ch</a></p>
        </footer>
        
    </body>


</html>
＆＃13;
＆＃13;
＆＃13;

Images are right next to each other but they shouldnt be

1 个答案:

答案 0 :(得分：0)

在CSS文件中试试这个！

.mainHeader img .Margrit {     最大宽度：30％;     height：auto;``

相关问题
最新问题