如何在html和CSS的不同列中放置几张图片？

时间：2019-02-22 03:33:17

标签： html css 

@import url('https://fonts.googleapis.com/css?family=Squada+One|Titillium+Web:400,700');

/*
font-family: 'Titillium Web', sans-serif;
font-family: 'Squada One', cursive;
*/

* {
    margin: 0;
    padding: 0;
    
    box-sizing: border-box;
}

#wrapper {
    margin: 0 auto 0 auto;
    
    width: 1000px;
    min-height: 200px;
}

header {
    padding: 0 10px 0 10px;
    
    width: 1000px;
    height: 65px;
    
    float: left;
    clear: both;
    
    background-color: #090504;
}

#logo {
    width: 500px;
    height: 65px;
    
    float: left;
}

h1 {
    font-family: 'Squada One', cursive;
    font-size: 57px;
    
    text-transform: uppercase;
    
    letter-spacing: 1px;
    
    color: white;
}

nav {
    width: 450px;
    height: 65px;
    
    float: right;
    
    text-align: right;
}

nav p {
    margin: 35px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 11px;
    font-weight: 700;
    
    text-transform: uppercase;
    
    word-spacing: 35px;
    
    color: white;
}

#hero {
    width: 1000px;
    height: 473px;
    
    float: left;
    clear: both;
    
    background-image: url(../assets/background-hero.jpg);
    background-repeat: no-repeat;
}

#keymessage {
    margin: 110px 0 0 10px;
    /*top right bottom left*/
    
    widows: 500px;
    height: 200px;
    
    float: left;   
}

#keymessage h2 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 36px;
    font-weight: 200;
    
    text-transform: uppercase;
    
    color: white;
}

#keymessage h3 {
    margin-top: -10px;
    margin-bottom: 10px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    font-weight: 200;
    
    text-transform: capitalize;
        
    color: white;
}

#keymessage p {
    margin-top: 50px;
    padding: 5px 7px 5px 7px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 10px;
    font-weight: 400;
    
    text-transform: uppercase;
    
    color: white;
    
    background-color: #a31c1a;
    
    display: inline;
    
    border-radius: 5px;
    border: 1px solid white;
}

#featured {
    padding: 10px 0 0 10px;
    
    width: 1000px;
    height: 500px;
    
    float: left;
    clear: both;
}

.featured-item {
    margin: 40px 5px 0 0;
    
    width: 319px;
    height: 500px;
    
    float: left;
}

.featured-item h2 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 16px;
    font-weight: 700px;
    
    text-transform: uppercase;
}

.featured-item p {
    margin-bottom: 10px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.featured-button {
    font-family: 'Titillium Web', sans-serif;
    font-size: 10px;
    font-weight: 200;
    
    padding: 2px 5px 2px 5px;
    
    color: white;
    
    text-transform: uppercase;
    
    background-color: #598527;
    
    display: inline;
    
    border-radius: 3px;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: right;
  width: 25%;
  padding: 5px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ozio Authentic Sushi</title>
        
        <link href="css/style.css" type="text/css" rel="stylesheet">
    </head>
    
    <body>
        <div id="wrapper">
            <header>
                <div id="logo">
                    <h1>Ozio Authentic Sushi</h1>
                </div> <!-- Logo ends -->
                
                <nav>
                    <p>Menu SPECIALS LOCATIONS CONTACT</p>
                </nav>
            </header>
            
            <section id="hero">
                <div id="keymessage">
                    <h2>Japanese Fusion Cuisine</h2>
                    <h3>Authentic &am; Traditionally Inspired Japanese Dishes</h3>
                    
                    <p>Try our New FALL Specialties ></p>
                </div> 
            </section> <!-- Hero ends -->
            
            <section id="featured">
                <div class="featured-item">
                    <p><img src="assets/featured-pumpkin_chipotle%20soup.jpg" width="319" height="158" alt="Seasonal Soups - Pumpkin Chipolete Soup"/> </p>
                    
                    <h2>Seasonal Soups</h2>
                            
                    <p>Ozio offers a collection of soups each fall that warm hands and make hearts happy. Each fall our sous-chef explore great locally grown flavours to bring the best combinations to awake your senses with our seasoning. (Pumpkin Chipotle Soup)</p>
                    
                    <p class="featured-button">More</p>
                </div> <!-- Seasonal Soups end -->
                
                <div class="featured-item">
                    <p><img src="assets/featured-maki_sushi.jpg" width="319" height="158" alt="Sushi - Maki SUshi"/> </p>
                    
                    <h2>Savoury Sushi</h2>
                    
                    <p>We have a wide selection of traditional sushi creations as well as creations unique to Ozio Authentic Sushi. We serve maki sushi for people who are becoming sushi lovers to hand-rolled temaki sushi for the more refined palette. </p>
                    
                    <p class="featured-button">More</p>
                </div> <!-- Savoury Sushi end -->
                
                <div class="featured-item">
                    <p><img src="assets/featured-udon.jpg" width="319" height="158" alt="Undeniable UDon"/> </p>
                    
                    <h2>Undeniable UDon</h2>
                    
                    <p>Enjoy a traditional taste of Japanese Udon noodles. We serve Fall Udon soups warm to heat up your taste buds during the cooler weather. Udon come in a number of pairing styles for both the meat lovers and veggitarians - the choice is all yours.</p>
                    
                    <p class="featured-button">More</p>
                </div> <!-- Undeniable UDon end -->
            </section> <!-- Featured ends -->
        
<!--
            <section id="gallery">
                <div class="gallery-pics">
                    <p><img src="assets/salad_bowl.jpg"></p>
                    <p><img src="assets/gravy_bowl.jpg"></p>
                    <p><img src="assets/orange_on_white.jpg"></p>
                </div>
            
            
            
            
            </section>
-->
            
            <div class="row">
              <div class="column">
                <img src="assets/gravy_bowl.jpg" alt="Gravy">
              </div>
              <div class="column">
                <img src="assets/two_bowls.jpg" alt="Bowls">
              </div>
              <div class="column">
                <img src="assets/salad_bowl.jpg" alt="Salad">
              </div>
            </div>
         
          
              <div class="column">
                <img src="assets/sushi.jpg" alt="Sushi">
              </div>
              <div class="column">
                <img src="assets/orange_on_white.jpg" alt="OrangeOnWhite">
              </div>
              <div class="column">
                <img src="assets/shrimp.jpg" alt="Shrimp">
              </div>
         
        
        
        
        </div>  <!-- Wrapper ends -->
    
    
    
    
    </body>
</html>

我的网站现在看起来如何 enter image description here

好的，我想将寿司图片放在底部的两个底部图片的左侧。

如何在html和CSS中做到这一点？ （我正在尝试发布用于HTML和CSS的代码，但是出现错误消息，您的帖子似乎包含正确编码的代码）

1 个答案:

答案 0 :(得分：1)

最简单的方法是使用宽度和填充来分别占屏幕的百分比。例如，如果您有6张图像并需要2行3列，则您希望宽度为30％，左右边距为1.66％。每个带有左右填充的图像将占屏幕的33.33％。

img {
    width: 30%;
	max-height: 100px;
	float: left;
	padding: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<img src="https://img.grouponcdn.com/deal/hfefAup1zQWBE2K8sWURgS27xax/hf-846x508/v1/c700x420.jpg">
	<img src="https://www.verywellhealth.com/thmb/6eCa_ReyK0zfrapJOXoVuD-boME=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-691112817-5a4eef095b6e240037fc6278.jpg">
	<img src="https://img.grouponcdn.com/bynder/Ri5HEhJFF4o6PFz5WCG2rrSNN4A/Ri-2048x1229/v1/c700x420.jpg">
	<img src="https://assets3.thrillist.com/v1/image/1559020/size/tmg-slideshow_l.jpg">
	<img src="https://media.fromthegrapevine.com/assets/images/2015/10/vegetarian-sushi-rolls.jpg.480x0_q71_crop-scale.jpg">
	<img src="https://images-gmi-pmc.edge-generalmills.com/d1584f73-4865-4b8b-b3e5-7f9ca741366f.jpg">
</body>
</html>

相关问题
最新问题