1
右の小さな箱を手に入れようとしていますが、私はそれを得ましたが、今では左の箱が右の箱の下に表示されています。私はそれを解決するためにいくつかの異なることを試みましたが、私はコードを破るだけです。ところで、グリッドを取得するためにジェネレータを使用しました。右側にボックスを作る、HTML
HTML & CSS：
/* GRID OF TWO ============================================================================= */
.span_2_of_2 {
\t width: 30%;
\t border-top: 4px solid #fff;
\t box-shadow: 0px 1px 2px #151515;
\t clear: right;
\t float: right;
}
.span_1_of_2 {
\t border-top: 4px solid #fff;
\t width: 65%;
\t box-shadow: 0px 1px 2px #151515;
\t clear: left;
\t float: left;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 990px) {
\t .span_2_of_2 {
\t \t width: 100%;
\t }
\t .span_1_of_2 {
\t \t width: 100%;
\t }
}
body {
\t background-color: #F2F2F2;
}
.body_large {
\t background-color: white;
\t height: auto;
\t margin-top: 1.5%;
\t color: black;}
.box_text {
\t padding: 3%;
\t font-size: 14px;
}
/* SECTIONS ============================================================================= */
.section {
\t clear: both;
\t padding: 0px;
\t 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 {
\t display: block;
\t float:left;
\t 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) {
\t .col {
\t \t margin: 1% 0 1% 0%;
\t }
}<!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>
\t <meta charset="utf-8">
\t <!-- Always force latest IE rendering engine & Chrome Frame -->
\t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t <title>Example of the Responsive Grid System</title>
\t <meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.">
\t <meta name="keywords" content="responsive, grid, system, web design">
\t <meta name="author" content="www.grahamrobertsonmiller.co.uk">
\t <meta http-equiv="cleartype" content="on">
\t <link rel="shortcut icon" href="/favicon.ico">
\t <!-- Responsive and mobile friendly stuff -->
\t <meta name="HandheldFriendly" content="True">
\t <meta name="MobileOptimized" content="320">
\t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <!-- Stylesheets -->
\t <link rel="stylesheet" href="css/html5reset.css" media="all">
\t <link rel="stylesheet" href="css/col.css" media="all">
\t <link rel="stylesheet" href="css/2cols.css" media="all">
\t <link rel="stylesheet" href="css/style.css" media="all">
\t <style type="text/css">
\t /*
\t ========================
\t - Note: These styles are just to pretty the basic page up a bit.
\t You should ignore these when copying and pasting into your site
\t because your stylesheet should take care of making it look pretty!
\t ========================
\t */
\t body { padding:2em; font : 100%/1.4 'Helvetica Neue', arial, helvetica, helve, sans-serif; \t
}
\t h1 { font-size:2.2em; padding:0 0 .5em 0; }
\t h2 { font-size:1.5em; }
\t .header { padding:1em 0; }
\t .col { background: black; color: white; padding: 1% 0; text-align: center;}
\t </style>
</head>
<body>
\t \t \t \t \t \t <!-- DE SMÅ STARTER HER -->
\t \t \t \t \t <div class="section group">
\t \t \t \t \t <div class="col span_2_of_2">
\t \t \t \t \t Ukens klanspiller
\t \t \t \t \t <div class="body_large" style="margin-top: 3%">
\t \t \t \t \t \t <div class="box_text">
\t \t \t \t \t \t 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
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col span_2_of_2">
\t \t \t \t \t Klan Info
\t \t \t \t \t <div class="body_large" style="margin-top: 3%">
\t \t \t \t \t \t <div class="box_text">
\t \t \t \t \t \t 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
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t <!-- DE SMÅ SLUTTER HER -->
\t \t \t \t <div class="section group">
\t \t \t \t \t <div class="col span_1_of_2">
\t \t \t \t \t Nytt klannavn!
\t \t \t \t \t \t <div class="body_large">
\t \t \t \t \t \t <div class="box_text">
\t \t \t \t \t \t 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
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t </div>
\t \t <div class="section group">
\t \t \t \t \t <div class="col span_1_of_2">
\t \t \t \t \t Ny Teamspeak 3 server!
\t \t \t \t \t <div class="body_large">
\t \t \t \t \t \t <div class="box_text">
\t \t \t \t \t \t 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
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t <!-- -->
\t \t \t \t </div>
\t \t \t \t \t <div class="section group">
\t \t \t \t \t <div class="col span_1_of_2">
\t \t \t \t \t Ny klan & splitter ny nettside!
\t \t \t \t \t \t <div class="body_large">
\t \t \t \t \t \t <div class="box_text">
\t \t \t \t \t \t 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
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
</body>
\t \t \t
\t \t \t \t </html>
あなたは簡単に説明できますか？ – vel
私はあなたの質問を理解していません – Emonadeo
画面の右側に小さなボックスを表示し、画面の左側に大きなボックスを表示したい –