在右侧制作框，HTML

时间：2017-05-13 10:21:26

标签： html css

所以我试图让右侧的小盒子得到它，但是现在左边的盒子显示在右边的盒子下面。我已经尝试了一些不同的东西来解决它，但后来我只是打破了代码。顺便说一句，香港专业教育学院使用发电机来获得电网。

HTML＆amp; CSS：

＆＃13;
＆＃13; 
/*  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%;
	}
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

试试这个：

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>

答案 1 :(得分：0)

在桌上试试

＆＃13;
＆＃13; 
<html>

<table border = 1>

  <tr>
    <td>box 1</td>
    <td>box 2</td>
    <td rowspan="2" >box 3</td>
  </tr>
  
  <tr>
    <td>box 4</td>
    <td>box 5</td>
  </tr>
  
  <tr> 
    <td>box 6</td>
    <td>box 7</td>
    <td rowspan="2" >box 10</td>
  </tr>
  
  <tr> 
    <td>box 8</td>
    <td>box 9</td>
  </tr>
 
</table>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题