我正在使用bootstrap,我创建了一个包含3列的行。我在列中有图片,我希望其中一个跨越2列的宽度。我最初的想法是使宽度:200%;但是,这并没有考虑到css列之间的差距,因此它不能很好地扩展。
我的第二个问题是垂直图像之间的间隙与柱间隙的大小不同。
HTML文件: SONDER
<meta name="Sonder" content="Great Donegal Food">
<!-- CSS/BootStrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Abhaya+Libre" rel="stylesheet">
</head>
<body>
<div class="container-fluid"> <!-- Allows full width to be occupied -->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: white;">
<div class="row">
<div class="col-md-12"> <!-- nav bar 12 column -->
<ul class="topnav">
<a href="#home"><img src="logo.jpg" alt="Sonder"></a>
<a href="http://localhost:8888"><li>Menu</li></a>
<a href="#about"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</nav></div>
<!-- col 1 start -->
<div class="col-md-4">
<br><br><br><br><br><br>
<img class="img_hover1" src="choc.jpg" alt="Sonder" style="width:100%;"></a>
<img class="img_hover2" src="turkeyflat.jpg" alt="Sonder" style="width:100%; margin-top: 2em;"></a>
<img class="img_hover3" src="stirloin.jpg" alt="Sonder" style="width:100%; margin-top: 2em;"></a>
</div> <!-- col 1 end -->
<!-- col 2 start -->
<div class="col-md-4">
<br><br><br><br><br><br>
<img class="img_hover4" src="scones.jpg" alt="Sonder" style="width:100%;"></a>
<img class="img_hover5" src="roast.jpg" alt="Sonder" style="width:205%; margin-top: 2em;"></a>
</div> <!-- col 2 end-->
<!-- col 3 start-->
<div class="col-md-4">
<br><br><br><br><br><br>
<img class="img_hover6" src="hot_chocolate.jpg" alt="Sonder" style="width:100%;"></a>
<img class="img_hover7" src="egg.jpg" alt="Sonder" style="width:100%; margin-top: 2em;"></a>
</div><!-- col 3 end-->
</div> <!-- end of Row -->
</div><!-- end of container-fluid -->
</body>
答案 0 :(得分:0)
<div class="row">
<!-- col 1 start -->
<div class="col-md-4">
<br><br><br><br>
<div class="caption">
<h3>Chocolate Cake</h3>
<p>Gourmet cake made from the finest italian chocolate and freshly prepared daily</p>
</div> <!-- End of caption -->
<img class="img_hover" src="choc.jpg" alt="Sonder" style="width:100%; height: 350px;">
<img class="img_hover" src="turkeyflat.jpg" alt="Sonder" style="width:100%; margin-top: 30px;">
<img class="img_hover" src="stirloin.jpg" alt="Sonder" style="width:100%; margin-top: 30px;">
</div> <!-- col 1 end -->
<!-- col 2 start -->
<div class="col-md-4">
<br><br><br><br>
<img class="img_hover" src="scones.jpg" alt="Sonder" style="width:100%; height: 560px;">
<!-- <img class="img_hover" src="roast.jpg" alt="Sonder" style="width:205%; margin-top: 2em;"> -->
</div> <!-- col 2 end-->
<!-- col 3 start-->
<div class="col-md-4">
<br><br><br><br>
<img class="img_hover" src="hot_chocolate.jpg" alt="Sonder" style="width:100%; height: 265px;">
<img class="img_hover" src="egg.jpg" alt="Sonder" style="width:100%; margin-top: 30px; height: 265px;">
</div><!-- col 3 end-->
这里的解决方案以嵌套列的形式凸显:
<!-- Leave column 1 empty -->
<div class="col-md-4"></div>
<!-- Add the image into column 2 and make it 8 wide instead of 4 -->
<div class="col-md-8">
<img class="img_hover" src="roast.jpg" alt="Sonder" style="width:100%; margin-top: 30px; ">
</div>
<!-- Add any more pictures here by creating new columns at a width of your choosing -->
</div> <!-- end of Row -->
答案 1 :(得分:0)
带有代码段的可运行代码
--------------------------------------------------------------------------------
module Parser (main) where
--------------------------------------------------------------------------------
-- modules
import Text.ParserCombinators.ReadP as ReadP
import Data.Char as D
import Control.Applicative
--------------------------------------------------------------------------------
-- this parses one o
oParser :: ReadP Char
oParser = satisfy (== 'o')
-- this parses one a
aParser :: ReadP Char
aParser = satisfy (== 'a') --(\v -> v == 'a')
-- this parses one plus
pParser :: ReadP Char
pParser = satisfy (== '+')
spaceParser :: ReadP Char
spaceParser = satisfy D.isSpace
parseExpr :: ReadP String
parseExpr = -- ReadP.choice [oParser, spaceParser]
main :: IO ()
main = print [ x | (x, "") <- ReadP.readP_to_S parseExpr "o +a o+a+a o o"]