отделения, выходящие из строя вокруг заголовка
Взгляни,
$invoice_no = 13;
$this->db->select('b1.Invoice_No, cust_name, cust_address, cust_contact, Item_name, Item_qty, Item_amount');
$this->db->from('tbl_bill_invoice b1');
$this->db->join('tbl_billmenu b2', 'b2.Invoice_No = b1.Invoice_No', 'inner');
$this->db->join('tbl_billcustomer b3', 'b3.cust_id = b1.cust_id', 'inner');
$this->db->where('b1.Invoice_no', $invoice_no);
$query = $this->db->get();
if ($query->num_rows() > 0) {
return $query->row();
} else {
return array();
}
8 ответов
Вы не должны действительно использовать абсолютное или относительное расположение в этом случае.
Следующее достигает того, в чем Вы нуждаетесь с минимальным объемом пререкания CSS.
Цвета becuase, я люблю цвет и так должен Вы!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
#wrapper {
width: 780px;
margin: 20px auto;
border: solid black 5px;
}
#header {
min-height: 125px;
overflow:hidden;
}
#body {
background-color:red;
}
#content {
margin-left: 50px;
margin-top: 0px;
background-color:pink;
}
.floatie { float:left; width:40px; height :40px;
margin:5px; background-color:#fe0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
</div>
<div id="body">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
</body>
</html>
Попытайтесь очиститься после своих пущенных в ход элементов в заголовке.
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div style="clear:both;"></div> <!-- Or use a clearfix... -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
Пока очищающийся элемент в рамках содержания отделения, это должно выполнить то, что Вы хотите.
Добавьте стиль, "ясный: оба" Вашему отделению с идентификатором "тела". Вы могли также добавить отделение с этим стилем сразу после "набор отделений плавающих" и перед закрывающим тэгом отделения заголовка.
Я использую этот стиль для очистки элементов:
.Clear { clear: both; height: 0; overflow: hidden; }
Разместите очищающееся отделение в заголовок, для предоставления размера элемента заголовка:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div class="Clear"></div>
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
Установка высоты очищающегося элемента для обнуления заставляет это не занимать место отдельно. Водосливный стиль - то, так, чтобы IE не давал его, высота eventhough высота обнуляется. IE имеет странную идею, что каждый элемент должен быть по крайней мере одним символом высоко, установив overflow:hidden; сохраняет высоту в нуле eventhough, содержание элемента является одним символом высоко в IE.
Если Вы хотите, чтобы #content обнаружился в границах границы #wrapper, примеряют эту подкачку для размера после удаления position:relative от #body (или удаляют тот DIV полностью):
#header{position: relative; overflow:hidden; clear:both;}
#content{position:relative; left:50px; top:0px;}
Тем путем Вы сможете видеть, что #content обнаруживается в обертке, но под #header.
Может происходить, потому что действительно нет ничего, чтобы #content перетерпел из-под. #header, когда это было установлено на родственника, отчасти исчезает для ниже, даже если #body был затем установлен на абсолют с потомками его набор родственнику.
Изменение #content от position:absolute кому: position:relative будет иметь его, прибывают под предыдущим DIV, который в этом случае был #header.
Когда Вы хотите очистить что-то, что также необходимо пустить в ход тот элемент, чтобы заставить его работать правильно. Таким образом, Вам будет нужно.
#header { clear: both; float: left; }
#body { clear: both; float: left; }
Попробуйте это.Примечание: переполнение, скрытое на отделении заголовка, решает потребность в очищающемся отделении. Отметьте уверенный, почему Вы используете расположение relative+absolute для содержания все же. Это лучше обрабатывается с полями, по моему скромному мнению.
<html>
<head>
<title>Layout</title>
<style type="text/css">
#wrapper { width: 780px; margin: 20px auto; border: solid black 5px; }
#header { overflow: hidden; background-color: yellow; }
#header div { float: right; border: 2px solid red; }
#body { position: relative; }
#content { position: absolute; left: 50px; top: 0px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div id="body">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
</body>
</html>
Я не поклонник использования "clear:both", если оно не полностью необходимо. Лучшее решение устанавливает "водосливное" свойство выходящего из строя DIV к "автоматическому".
Попробуйте что-то как:
#header { float: left; overflow: auto; }