原则上我只需要照顾FireFox。
对于我的内容,我希望有两个具有相同宽度的div,它们之间的垂直线占据整个高度,底部有20个像素。
我开始了,但正确的div很小,我也不知道如何获得垂直线。
目前我有以下内容:
<?xml version = "1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "nl" lang = "nl">
<html>
<head>
<style>
h1 {
color: #18A5D7;
}
html, body {
height: 100%;
margin: 0px;
}
#container {
background: linear-gradient(blue, white);
height: 100%;
margin: auto;
width: 100%;
}
#footer {
height: auto;
margin: auto;
position: relative;
width: 100%;
}
#main {
overflow: auto;
}
.col {
}
.row {
background-color: white;
display: flex;
border: 1px solid black;
border-radius: 10px;
margin-left: 50px;
margin-right: 50px;
}
.title {
font-weight: bold;
}
button.no {
background: #84a0C4;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
color: #FFFFFF;
}
button.yes {
background: #84a0C4;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
color: #FFFFFF;
}
div.block {
background: #E6EBF1;
border-radius: 15px;
color: #1C589B;
margin-bottom: 10px;
padding: 10px 20px;
}
div.content {
border-style: solid;
}
div.vl {
border-left: 2px solid grey;
width: 0;
height: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/JavaScript">
function doResize() {
var footer_height = $('#footer').height()
footer_height += 2
$('#footer').css('margin-top', '-' + footer_height + 'px')
$('#main').css('padding-bottom', footer_height + 'px')
var footer_position = $('#footer').offset().top + window.screenY
var content_position = $('#content').offset().top + window.screenY
var newHeight = footer_position - content_position - 2
var newWidth = $(document).width() - 100
$('#content').css({
'height': newHeight,
'width': newWidth
})
}
$(document).ready(function() {
doResize()
})
$(window).resize(function() {
doResize()
})
</script>
</head>
<body>
<div id="container">
<div id="main">
<div id="header"><div class="header">
Header
</div></div>
<div class="row">
<div class="col" id="content">
<h1>03 Complaints</h1>
Question one
<br/><br/>
Question two
<br/><br/>
</div>
<!-- I tried, but it did not work, puts content in the border
<div class="col vl" >
--->
<div class="col" >
Be short, concise and to the point
<br/>
Stick to the medical terms
<br/>
Questioning
<br/>
Stick to the medical terms
</div>
</div>
</div>
</div>
<div id="footer"><div class="footer">Footer</div></div>
</body>
</html>
我需要改变什么?
答案 0 :(得分:1)
要为两个div提供相同的宽度,您需要添加适用于它们的css class
,例如:
div.col {
width: 50%;
word-wrap: break-word;
}
要在它们之间建立垂直线,你需要制作一个div
并将它放在两个div之间作为分隔符,如:
//your div 1
<div id="divider"></div>
//your div 2
并添加一些css
以使其看起来是一条垂直线:
#divider {
width: 2px;
background: gray;
height: inherit;
margin-top: 20px;
margin-bottom: 20px;
}
<强> SAMPLE DEMO 强>