在右

在右

关注
发信
关注(28)粉丝(399)

html - 在右侧制作框，HTML

所以我试图把小盒子放在右边，我明白了，但是现在左边的盒子显示在右边的盒子下面。我尝试了一些不同的方法来解决它，但是后来我破坏了代码。顺便说一句，我用一个发电机来获得网格。

HTML和CSS：



/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 30%;
	border-top: 4px solid #fff;
	box-shadow: 0px 1px 2px #151515;
	clear: right;
	float: right;
}

.span_1_of_2 {
	border-top: 4px solid #fff;
	width: 65%;
	box-shadow: 0px 1px 2px #151515;
	clear: left;
	float: left;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 990px) {
	.span_2_of_2 {
		width: 100%;
	}
	.span_1_of_2 {
		width: 100%;
	}
}

body {
	background-color: #F2F2F2;
}

.body_large {
	background-color: white;
	height: auto;
	margin-top: 1.5%;
	color: black;}

.box_text {
	padding: 3%;
	font-size: 14px;
}


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col {
		margin: 1% 0 1% 0%;
	}
}

<!DOCTYPE html>
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>

	<meta charset="utf-8">
	<!-- Always force latest IE rendering engine & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Example of the Responsive Grid System</title>
	<meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.">
	<meta name="keywords" content="responsive, grid, system, web design">

	<meta name="author" content="www.grahamrobertsonmiller.co.uk">

	<meta http-equiv="cleartype" content="on">

	<link rel="shortcut icon" href="/favicon.ico">

	<!-- Responsive and mobile friendly stuff -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Stylesheets -->
	<link rel="stylesheet" href="css/html5reset.css" media="all">
	<link rel="stylesheet" href="css/col.css" media="all">
	<link rel="stylesheet" href="css/2cols.css" media="all">
	<link rel="stylesheet" href="css/style.css" media="all">
	<style type="text/css">

	/*
	========================
	- Note: These styles are just to pretty the basic page up a bit.
	You should ignore these when copying and pasting into your site
	because your stylesheet should take care of making it look pretty!
	========================
	*/
	body { padding:2em; font : 100%/1.4 'Helvetica Neue', arial, helvetica, helve, sans-serif;
 }
	h1 { font-size:2.2em; padding:0 0 .5em 0; }
	h2 { font-size:1.5em; }
	.header { padding:1em 0; }
	.col { background: black; color: white; padding: 1% 0; text-align: center;}

	</style>

</head>
<body>

						<!-- DE SMÅ STARTER HER -->
					<div class="section group">
					<div class="col span_2_of_2">
					Ukens klanspiller
					<div class="body_large" style="margin-top: 3%">
						<div class="box_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
						</div>
					</div>
					</div>

					<div class="col span_2_of_2">
					Klan Info
					<div class="body_large" style="margin-top: 3%">
						<div class="box_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
						</div>
					</div>
					</div>
					</div>

				<!-- DE SMÅ SLUTTER HER -->

				<div class="section group">
					<div class="col span_1_of_2">
					Nytt klannavn!
						<div class="body_large">
						<div class="box_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
						</div>
					</div>
					</div>

          		</div>



          		<div class="section group">
					<div class="col span_1_of_2">
					Ny Teamspeak 3 server!
					<div class="body_large">
						<div class="box_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
						</div>

					</div>
					</div>



			<!-- -->
				</div>

					<div class="section group">
					<div class="col span_1_of_2">
					Ny klan & splitter ny nettside!
						<div class="body_large">
						<div class="box_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
						</div>
					</div>
					</div>
				</div>

</body>


				</html>

最佳答案

尝试这个 ：



body {
      font-family: 'Helvetica Neue', arial;
}

#wrapper {
      overflow: auto;
      padding: 10px;
}

#right {
     width: 30%;
     float: right;
}

#left {
     width: 65%;
     float: left;
}

.parent {
      text-align: center;
      border: 1px solid #ccc;
      background-color: #fff;
      padding-top: 5px;
      margin-bottom: 5px;

}

#left .parent {
     margin-bottom: 18px;
}

.main {
     background-color: #000;
     padding-bottom: 10px;

}


.main h3 {
     margin:0;
     color: #fff;
     padding: 10px 0;
}

.main .content {
    background-color: #fff;
    padding: 10px;
    font-size: 16px;
}

@media screen and (max-width: 990px) {

    #right, #left {
        float: none;
        width: 100%;
    }
}
		

<div id="wrapper">

    <div id="right">

        <div class="parent">

            <div class="main">

                <h3>Ukens klanspiller</h3>

                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </div>
            </div>
       </div>

        <div class="parent">

            <div class="main">

                <h3>Klan Info</h3>

                <div class="content">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </div>
            </div>
        </div>

    </div>

    <div id="left">

        <div class="parent">

            <div class="main">

                <h3>Nytt klannavn!</h3>

                    <div class="content">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </div>
                </div>
            </div>

        <div class="parent">

            <div class="main">

                <h3>Ny Teamspeak 3 server!</h3>

                <div class="content">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              </div>
          </div>
      </div>

        <div class="parent">

            <div class="main">

                <h3>Ny klan & splitter ny nettside!</h3>

                <div class="content">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              </div>
          </div>
      </div>
  </div>
</div>

10-06 11:33
Powered by LMLPHP ©2024 在右 0.044409