Question

我尝试了这段代码并尝试为header和div标签添加不同的显示属性，但是下一个div标签中的图像位于左上角。我希望它出现在右上角（向右拉）的标题标记的下一行。这是关于div和标题标记的位置

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>


<style type="text/css">

</style>
</head>
<body style="background-color: #1D1D1D" >

<div id="main" class="">

<header class="site header" role="banner">
    <h1 id="logo" class="pull-right"><a href="/"> Logo of site</a>
    </h1>
</header>

<div id="">
    <div id="" class="">      
        <img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
     </div>


</div>


</div>

<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>

Answer 1

你可以在标题标记之后添加class =“clearfix”，然后图像将出现在下一行。 Clearfix是bootstrap中的一个类

Answer 2

将使用在这两个元素之一上使用css的display: block;。确实显示：阻止告诉div占用页面的所有宽度。

<header class="site header" role="banner">
    <h1 id="logo" class="pull-right"><a href="/"> Logo of site</a>
    </h1>
</header>

<div id="">
    <div id="" class="" style="display:block;">      
        <img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
     </div>
</div>

或者只是使用bootstrap structurales类作为“容器”，“行”在标题上方创建一个新的部分？

Answer 3

您可以使用此float:left属性，只需查看此示例

即可

header {
  float:left;
  width:100%;
  background: #c1c1c1; /* just for showing the header */
  padding:15px;
}
.block-element {
  float:left;
  width:100%;
  background: #ddd; /* just for showing the div */
  padding:15px;
  margin-top:30px;
}

<header>
  <!-- something here -->
</header>

<div class="block-element">
  <!-- something here -->
</div>

<div class="block-element">
  <!-- something here -->
</div>

希望在<header>标记

3 个答案: