簡単な質問があります。そして、答えはあなたにとっても簡単だと思います。Web サイトにBootstrapを使用しています。すべてのファイルがダウンロードされ、php ファイルに接続されます。クラスコンテナを持つコンテナdivを持っています。その中で、header などのすべての Web サイト foo が発生します。ここで、ヘッダーに 2 つの span6 div をコーディングします。私はそれらを隣り合わせにしたいと思います。と思われるような。しかし、2 番目の div は最初の div の下に表示されます。私は何を間違えていますか？
これが私のファイルです： index.php
<!doctype html>
<!-- Developer: Raphael Klein - http://austrianmultimedia.at/ -->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="<?php echo $sitePath; ?>">
<meta name="author" content="<?php echo $author; ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="apple-touch-icon" href="">
<script src="js/jquery-1.10.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- my CSS -->
<link rel="stylesheet" href="css/doktorhaiden.css">
</head>
<body>
<div id="container" class="row, container">
<header>
<?php include("header.php"); ?>
</header>
<div class="row">
<div id="left" class="span4">
<div class="element" id="navLeft">
<ul>
<li><h1><a href="">Home</a></h1></li>
<li><h1>Über uns</h1></li>
<li><h1>Kontakt</h1></li>
</ul>
</div> <!-- element -->
</div> <!-- left -->
<div id="right" class="span8">
<div id="home" class="element">
<h1><hr width="100px">Willkommen<hr width="200px"></h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<img class="thumbnail" src="graphics/placeholder.png">
</div> <!-- home -->
<div id="ueberuns" class="element">
<h1><hr width="100px">Über uns<hr width="300px"></h1>
<div class="span4">
<h2>Dr. (med) Katharina Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
<div class="span4">
<h2>Dr. (med) Elmar Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
</div> <!-- ueber uns -->
</div> <!-- right -->
</div>
</div> <!-- container -->
</body>
</html>
私のheader.php
<div class="row">
<div id="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" style="background-color:blue">
salkjdhsa
</div>
</div>
そして最後に私のCSSファイル
/* Developer: Raphael Klein - http://austrianmultimedia.at/ */
/* @group undo defaults margins and paddings */
/* INIT */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, , span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------- @end INIT */
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 0px;
}
.row {
margin-left: 0px;
*zoom: 1;
}
#container {
}
body {
background-color: #fff;
font-family: 'Raleway', sans-serif;
line-height: 21px;
}
header {
height: 100px;
}
#left {
background-color: #3F3F3F;
text-align: right;
}
#right {
margin-left: 10px;
}
#left h1 {
color:#5AD1E5;
font-size: 2em;
line-height: 0.7em;
}
#right h1 {
font-size: 2em;
}
#right h2 {
font-size: 1em;
color: #CC9E44;
}
#right h1 hr {
display: inline-block;
top: 12px;
left: 10px;
position: relative;
border: 0;
border-top: 2px solid #5AD1E5;
margin-right: 20px;
}
.element {
padding:10px 10px 10px 10px;
}
#navLeft {
margin:0px 10px 20px 0px;
}
/* Seitenbereiche */
#home {
/*background-color: #FFCE00;*/
}
/* Images */
.thumbnail, .thumbnailHoch {
border: 1px solid #5AD1E5;
padding: 10px 10px 10px 10px;
}
.thumbnail {
width: 350px;
}
.thumbnailHoch {
height: 200px;
}
hr {
/*height: 24px;
background: url('flourish.png')
no-repeat 50% 50%;
margin: 3em 0;
border: 0;*/
}
あなたが私を助けることができるとき、私はとても幸せです! さようなら、ラファエル