Fatal编程技术网
  • html/
  • Html 处理我的网站中的浮动

Html 处理我的网站中的浮动

html css web

Html 处理我的网站中的浮动,html,css,web,Html,Css,Web,我正在使用html和css开发我的第一个网站。对于公文包区域/工作区域，我希望在它们旁边有三个图像和三个描述，但我想替换它们。例如，我的第一行左侧有一个图像，右侧有一个文本。我的第二行左边是文本，右边是图像，第三行与第一行相同。我根本不知道最好的方法是什么，谁能帮我实现这个布局，因为我只是觉得我在添加越来越多不必要的代码，因为我不知道我在做什么 HTML: 尝试查看CSS第n个子选择器。例如，您可以检查以下代码段。 一些文本 一些文本 一些文本 .集装箱{ 宽度：400px； } .galR

我正在使用html和css开发我的第一个网站。对于公文包区域/工作区域，我希望在它们旁边有三个图像和三个描述，但我想替换它们。例如，我的第一行左侧有一个图像，右侧有一个文本。我的第二行左边是文本，右边是图像，第三行与第一行相同。我根本不知道最好的方法是什么，谁能帮我实现这个布局，因为我只是觉得我在添加越来越多不必要的代码，因为我不知道我在做什么

HTML:

尝试查看CSS第n个子选择器。例如，您可以检查以下代码段。 


一些文本
一些文本
一些文本
.集装箱{
宽度：400px；
}
.galRow:n个孩子（偶数）.galRowImage.galRow:n个孩子（奇数）.galRowImage{
浮动：左；
}   
.galRow:n个孩子（偶数）.galRowImage.galRow:n个孩子（奇数）.galRowImage{
浮动：对；
}
与kishanW所说的类似。根据您的浏览器支持，您可以使用第n个子伪选择器：

这是一个HTML的工作示例，我刚刚添加了一个row类并删除了row 1，等等

。清除修复{
溢出：自动；
缩放：1；
}
#画廊容器{
宽度：80%；
保证金：0自动；
背景：#C3C3；
边框：1px纯红；
}
#画廊集装箱。世界其他地区{
填充：2.5%；
}
#画廊容器。行图{
背景：#00F；
宽度：25%；
文本对齐：居中；
}
#画廊集装箱，p排{
背景：#F00；
宽度：67.5%；
填充：2.5%；
保证金：0；
}
#画廊容器。行：第n个子（奇数）图形{
浮动：左；
利润率:0 2.5%0 0 ;；
}
#画廊容器。行：第n个子（奇数）p{
浮动：左；
}
#画廊容器。行：第n个子（偶数）图形{
浮动：对；
利润率：0.2.5%；
}
#画廊容器。行：第n个子（偶数）p{
浮动：左；
}

沙龙社交网站

网站的描述。网站的描述。网站的描述。网站的描述。网站的描述。网站的描述。网站的描述。网站的描述。



网站的描述。网站的描述。网站的描述。网站的描述。


JJ和儿子电气网站
TheTwoedge剑网站

网站的描述。网站的描述。网站的描述。网站的描述。



   <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="David Espejo">
    <meta name="description" content="Providing small businesses and individuals websites using wordpress">
    <meta name="keywords" content="web,design,wordpress,HTML,CSS,PHP">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- for mobile devices -->
    <title>DEdesigns</title>
    <script src="html5shiv.js"></script>    <!-- allows html 5 styling -->
    <link rel="stylesheet" href="normalize.css"> <!-- a modern CSS reset -->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
<div id="container">
    <header id="main-header">
        <h1>DEdesigns</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header> <!-- end #main-header -->
    <article id="about-me">
        <h1>About Me</h1>
            <figure>
                <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="" height="">
                <figcaption>An image of myself</figcaption>
            </figure>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
                also the leap into electronic typesetting, remaining essentially unchanged
            </p>
            <input type="submit" value="Call Me">
    </article> <!-- end #about-me -->
    <article id="gallery">
        <h1>My Work</h1>
        <div id="gallery-container">
            <div class="row-one clear-fix">
                <figure>
                    <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
                    <figcaption>SalonSociel website</figcaption>
                </figure>
                <p>
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                </p>
            </div>
            <!--  ends first row -->
            <div class="row-two clear-fix">
                <p>
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                </p>
                 <figure>
                    <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
                    <figcaption>JJ and Sons Electric website</figcaption>
                </figure>
            </div>
            <!-- ends second row -->
            <div class="row-three clear-fix">
                <figure>
                    <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-128-noshadow.png" width="#" height="#">
                    <figcaption>Thetwoedgesword website</figcaption>
                </figure>
                <p>
                    A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
                </p>
            </div>
            <!-- ends third row -->
        </div> <!-- ends #gallery-container -->
    </article> <!-- end #gallery -->
    <article id="services">
        <h1>Services</h1>
         <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
    </article> <!-- end #services -->
    <article id="contact-me">
        <h1>Contact Me</h1>
        <p>some contact me stuff goes here</p>
    </article> <!-- end #contact-me -->
    <footer>
        <p>This is my fotter</p>
    </footer>    
</div> <!-- end #container -->
</body>
</html>

   #container {
    width: 100%;
    background: #4de8d0;
    border: 1px solid black;
    font: 1em/2 sans-serif;
    margin-top: 50px;
}


#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: black;
    color: white;
    font-size: 0.85em;
    line-height: 1.2;
}

#main-header h1 {
    float: left;
    margin: 10px 30px;
}

nav ul {
    display: table;
    margin: 0;
    padding-left: 0;
}

nav, nav li {
    display: inline-block;
}

nav {
    display: table;
    background: #c3c3c3;
    height: 50px;
}

nav a {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
    padding: 0px 20px;
    border-right: 1px solid black;
}

h1, h2 { text-align: center; }



#about-me {
    margin: 0 auto;
    width: 100%;
    background-color: #32c6cd;
    color: white;
    border-bottom: 10px solid black;
    text-align: center;
}

#about-me figure {
    text-align: center;
}

#about-me p {
    margin: 0 auto;
    width: 60%;
    padding: 0 5%;
}

#gallery-container {
    width: 60%;
    margin: 0 auto;
    background: #c3c3c3;
    border: 1px solid red;
}

#gallery-container figure {
    width: 25%;
    text-align: center;
}

#gallery-container p {

}


.row-one, .row-two, .row-three {
    border: 1px solid green;
    background: lightblue;
}



.clear-fix {
    overflow: auto;
    zoom: 1;
}

.row-one figure {
    float: left;
    background: blue;
}

.row-one p {

}

.row-two figure {
    float: right;
    background: blue;
}

.row-one p {
    background: red;
    padding: 3%;
}

.row-two figure {
    width: 25%;
    float: right;
    background: red;
}

.row-two p {
    background: red;
    padding: 3%;

}

<div class="container">
    <div class="row galRow">
        <div class="galRowImage">
            <img src="#" alt=""/>
        </div>
        <div class="galRowText">some text</div>
    </div>
    <div class="row galRow">
        <div class="galRowImage">
            <img src="#" alt=""/>
        </div>
        <div class="galRowText">some text</div>
    </div>
    <div class="row galRow">
        <div class="galRowImage">
            <img src="#" alt=""/>
        </div>
        <div class="galRowText">some text</div>
    </div>
</div>
<style>
    .container{
        width: 400px;
    }
    .galRow:nth-child(even) .galRowImage, .galRow:nth-child(odd) .galRowImage{
        float: left;
    }   
    .galRow:nth-child(even) .galRowImage, .galRow:nth-child(odd) .galRowImage{
        float: right;
    }
</style>