个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在尝试创建一个包含两个 div(左侧和右侧)以及底部的第三个 div 的页面。
目标是在左边的 div 中放一张照片并且它是静态的。右侧的 div 将包含垂直滚动的较小照片。第三个 div，bottom，将位于底部并且也是静态的。
|左 |向右滚动 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Custom styles for this template go here -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="element one">
<h1>Text</h1>
<img src="image.png" alt="Front View">
</div>
<div class="element two">
<strong>Living Room</strong>
<img class="carousel_image" src="img/LivingRoom.png" alt="living room">
<strong>Kitchen</strong>
<img class="carousel_image" src="img/Kitchen.png" alt="Kitchen">
<img class="carousel_image" src="img/Kitchen2.png" alt="Kitchen Counter">
</div>
<hr>
<!-- bottom details / map -->
<div class="container bottom">
<!-- row of columns -->
<div class="row">
<div class="col-md-8">
<h3>Details</h3>
<div class="col-md-6">
<strong>text</strong>
<br>
<strong>text</strong>
</div>
<div class="col-md-6">
<strong>text</strong> 1984
<br>
<strong>text</strong> 0.20
</div>
<br><br><br><br>
<a class="btn btn-default" href="#" role="button">Contact</a>
<a class="btn btn-default" href="#" role="button">Make an Offer</a>
</div><!-- /col -->
<div class="col-md-4">
<h3>Map</h3>
<p>insert Google Map here</p>
</div><!-- /col -->
</div><!-- /row -->
</div> <!-- /container -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- Bootstrap core JS -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
div.element{
width:60%;
background-color: white;
height:650px;
font-family: Arial;
font-size:12px;
padding: 10px;
position: absolute;
float: left;
}
div.two{
overflow: scroll;
margin-left: 60%;
}
.bottom{
margin-top: 650px;
}
.carousel_image{
width: 25%;
height: 25%;
}
最佳答案
您可以使用简单的 CSS 和一点点 Javascript(js 注释中的 jQuery 替代方案)将其归档。
document.getElementsByClassName('thumbnails')[0].style.height = document.getElementsByClassName('photo')[0].clientHeight+'px';
/*
If you are using jQuery you can also use
$('.thumbnails').css('height', $('.photo').height());
*/.row .photo{
background: #ef4375;
}
.row .thumbnails {
background: #97b344;
overflow-y: scroll;
}
.row .footer {
background: #febb39;
height: 110px;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 photo">
<img src="http://placehold.it/500/?text=Principal" alt="" class="img-responsive">
</div>
<div class="col-xs-4 thumbnails">
<img src="http://placehold.it/300/?text=Thumb 1" alt="" class="img-responsive">
<img src="http://placehold.it/300/?text=Thumb 2" alt="" class="img-responsive">
<img src="http://placehold.it/300/?text=Thumb 3" alt="" class="img-responsive">
<img src="http://placehold.it/300/?text=Thumb 4" alt="" class="img-responsive">
<img src="http://placehold.it/300/?text=Thumb 5" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-12 footer"></div>
</div>
</div>关于html - CSS 拆分多个 div，只有一个滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37358026/
29
4
0
假设我有这个变量 var image = "image.jpg"; 我正在尝试拆分变量图像的内容并将 _thumbs 插入其中以获得类似 image_thumbs.jpg 的内容。 我该如何解决这个问
我有一个包含多个问题和答案的单元格，其组织方式类似于 CSV。因此，为了将所有这些问题和答案分开，使用逗号作为分隔符的简单拆分应该很容易分开。 不幸的是，有些值使用逗号作为小数分隔符。有没有办法避免这
这是简单的代码: import std.algorithm; import std.array; import std.file; void main(string[] args) { aut
我正在尝试解析一个看起来像的 txt 文件 A - 19 B - 2 C - 3 我正在使用扫描仪方法读取它并在“- ”中拆分，以便我的输出看起来像: A 19 B 2 C 3 但是它似乎没有正确拆分
我有这些网址字符串 file:///home/we/Pictures/neededWord/3193_n.jpg file:///home/smes/Pictures/neededWord/jds_2
我正在解析一个 CVS 文件，如下所示: "07555555555",25.70,18/11/2010,01/03/2011,N,133,0,36,,896,537,547,,Mr,John,Doe,
我在脚本中使用以下行返回 $folder 处所有文件夹的所有路径地点。 dir -recurse $folder|?{$_.PSIsContainer}|select -ExpandProperty
我正在尝试将字符串格式化为word+word+word 例如 “超音乐节”变成“超+音乐+节日” 我尝试过使用以下代码 query.split(" ").join("+"); 或 query.repl
我叫 luis，住在 arg。我有一个问题，无法解决。 **IN BASH** pwd /home/labs-perl ls file1.pl file2.pl **IN PERL** my $ls
我想从包 javax.json 中拆分 JsonArray，但我找不到完成这项工作的便捷方法。我查看了文档，只能想到迭代 JsonArray 并使用 JsonArrayBuilder 手动添加项目。
我希望在第一个 ':' 处拆分字符串，以防止字符串的第二部分包含 ':' 时出现问题。我一直在研究正则表达式，但仍然遇到一些问题，有人可以帮我吗？谢谢。 最佳答案 您可以使用overload of s
我想拆分列表的列表 ((A,1,2,3),(B,4,5,6),(C,7,8,9))进入: (A,1) (A,2) (A,3) (B,4) (B,5) ... 我试过rdd.flatMapValues(
我有一个文本文件，其中每一行都有数据。它看起来像这样: number0;text0 number1;text1 number2;text2 ..等等 所以我通过 xmlhttprequest 将该文本
问题很简单——比如说，我得到了函数，它接收数组作为参数 void calc(double[] data) 如何将这些数据“拆分”成两个子数组并像这样传递给子函数 calc_sub(data(0, le
我想显示来自 EMAIL_TEXT 数据库列的数据，在定义的字符处拆分列。出于某种原因，我的结果只打印第一行到我拆分字符串的位置，跳过其余行。这是我希望在每个“|”之后拆分的数据。 这里是要拆分的数据
我有一个动态数组，我想排除字符串的第一部分，但我不知道第一部分之后会有多少对象，我想将它们全部包含在一个新字符串中。 string = "text.'''hi''','''who''' '''are'
我想拆分 URL 的某些特定部分，这是我目前所做的。 var query = window.location.pathname.split( '/' ); query = window.locati
我有一条消息携带 XML(订单)，其中包含多个同质节点(比如产品列表)以及其他信息(比如地址、客户详细信息等)。我必须使用另一个外部服务提供的详细信息来丰富每个“产品”，并返回带有丰富“产品”的相同完
我有一个动态生成的大字符串，我正在拆分它。 var myString="val1, val, val3, val4..... val400" 我对此字符串进行了简单的拆分， myString= myS
这个问题在这里已经有了答案: Java String split removed empty values (5 个答案) 关闭 7 年前。 我正在尝试使用 split(";") 将字符串转换为数组
我是一名优秀的程序员,十分优秀！