logo标签列表

在页面右侧添加div元素

htmlcss
4
所以我有一个傻瓜问题，如何把我的div放在右边？我有主要内容，但我需要在右侧设置四个div。它看起来像这样：this，我需要添加< strong>div1-4 。我应该在.main_container 中添加width：100％; float:left 吗？
问题#2 - 我想将< strong> main_info1-3 分组到一个名为 main 的div中，以便我可以在css中使用 .main ，并使用 max-width：900px； overflow:hidden； margin-left:20px; 属性为所有的div而不需要重复， 但当我这样做时，< strong> main_info2 会跳过< strong> main_info1 列表。谢谢。
HTML：
<div class="main_container">
<div class="title_container">
    <h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
    <div class="block1">
        <span>Text</span>
    </div>
    <div class="block2">
        <span>Text</span>
    </div> 
</div>   
</aside>
<div class="content clearfix">
    <div class="image1">
        <img src="img/img1.jpg">
    </div>
    <div class="image2">
        <img src="img/img2.jpg">
    </div>
</div>
<div class="main_info">
    <h2>Title</h2>
    <p>Text</p>
</div>
<div class="main_info2 clearfix">
    <h2>Title</h2>
    <ul>
    <li>
    <p>Text</p>
    </li>
    </ul>
</div>
<div class="main_info3 clearfix">
    <h2>Title</h2>
    <p>Text</p>
</div>
</div>

CSS：

.main_container {
  width: 1360px;
  margin: 0 auto;
  background: url("../img/bg.jpg") left top no-repeat;
  background-color: #0c0334;
}

.title_container {
  display: table;

}

.title_container h1 {
  float: left;
  display: table-cell;
  vertical-align: top;
  margin-top: 50px;
  margin-left: 20px;
  line-height: 66px;

}

.small_blocks {
  min-width: 900px;
  overflow: hidden;
}

.small_blocks div {
  height: 55px;
  margin-top: 30px;
}

.small_blocks .block1 {
  float: left;
  margin-left: 20px;
  background: #390b5d;
  width: 595px;
  line-height: 52px;
}   

.small_blocks .block1 span {
  font-size: 30px;
  padding-left: 20px;
  font-weight: 100;
}

.small_blocks .block2 {
  float: left;
  width: 285px;
  background: #e26c34;
  padding-left: 20px;
  line-height: 52px;
  vertical-align: middle;
}

.small_blocks .block2 span {
  font-size: 30px;
  padding-left: 10px;
  font-weight: 100;
  vertical-align: middle;
  display: inline-block;
}

.clearfix:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.content {
  width: 900px;
  height: 377px;
  overflow: hidden;
  margin: 20px 0 0 20px;
}

.content .image1 {
  float: left;
  width: 268px;
}

.content .image2 {
  float: left;
  margin-left: 10px;
  width:100%;
  max-width: 622px;
}

.main_info {
  max-width: 900px;
  overflow: hidden;
  margin-top: 60px;
  margin-left: 20px;  
}

.main_info h2 {
  height: 34px;
  border-bottom: 1px solid #390b5d;
}

.main_info2  {
  max-width: 900px;
  overflow: hidden;
  margin: 60px 0px 0px 20px;
  background: #110321;
}   

.main_info2 h2 {
  background: #390b5d;
  min-height: 55px;
  width: 880px;
  padding-left: 20px;
  height: 34px;
  color: #fff;
  line-height: 52px;
}

.main_info3  {
  max-width: 900px;
  overflow: hidden;
  margin: 60px 0px 0px 20px;
  background: #390b5d;
}   

.main_info3 h2 {
  min-height: 55px;
  width: 880px;
  padding-left: 20px;
  height: 34px;
  color: #fff;
  line-height: 52px;
}
你想移动哪四个 div？ - CapeStar
请查看我附加的图片，右侧有四个方块div1-4。我不想移动它们，我想创建它们，但我不知道如何创建它们，使它们出现在主内容上方而不是下方。 - xantoo
你应该看看一些网格框架。Bootstrap有一个相当不错的。看起来你想要一个两列布局。 - Will
Bootstrap可能可以，但这不是一个网站，只是一个简单的单页HTML，所以过于复杂了。 - xantoo
1个回答
3

我觉得你是个新手，应该努力掌握HTML和CSS的技能。 :)

不过，这里有一个解决方案。请仔细检查它们，希望你能找到答案。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
}
.clearfix:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.wrapper {
  min-width: 1000px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}
.title_container {
  padding-top: 50px 0 30px;
}
.title_container h1 {
  line-height: 66px;
}
.small_blocks {
  height: 55px;
  overflow: hidden;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 100;
  line-height: 52px;
  color: #fff;
}
.small_blocks > div {
  height: inherit;
  float: left;
  padding-left: 20px;
}
.small_blocks .block1 {
  background: #390b5d;
  width: 66.111111%;
}
.small_blocks .block2 {
  width: 33.888889%;
  background: #e26c34;
}
.content {
  /*height: 377px;*/
  overflow: hidden;
  margin-bottom: 60px;
}
.content > div img {
  width: 100%;
  height: auto;
}
.content .image1 {
  float: left;
  width: 29.777778%;
}
.content .image2 {
  float: left;
  width: 70.222222%;
  padding-left: 10px;
}
.main_container {
  width: 68.181818%;
  float: left;
}
.main_info {
  margin-bottom: 60px;
  background: #d7d7d7;
}
.main_info .head {
  padding-left: 20px;
  background: #000;
  color: #fff;
}
.main_info h2 {
  height: 34px;
  line-height: 34px;
}
.main_info .body {
  padding: 20px;
}
.sidebar {
  width: 31.818182%;
  padding-left: 20px;
  float: right;
}
.sidebar_block {
  min-height: 150px;
  margin-bottom: 20px;
  padding: 20px;
  background: #000;
  color: #fff;
}
<div class="wrapper">
  <header class="title_container">
    <h1>Title</h1>
  </header>
  <main class="main_container">
    <div class="small_blocks">
      <div class="block1">
        <span>Block 1</span>
      </div>
      <div class="block2">
        <span>Block 2</span>
      </div>
    </div>
    <div class="content clearfix">
      <div class="image1">
        <img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
      </div>
      <div class="image2">
        <img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
      </div>
    </div>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-1 h2</h2>
      </div>
      <div class="body">
        Main info 1
      </div>
    </section>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-2 h2</h2>
      </div>
      <div class="body">
        Main info 2
      </div>
    </section>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-3 h2</h2>
      </div>
      <div class="body">
        Main info 3
      </div>
    </section>
  </main>
  <aside class="sidebar">
    <section class="sidebar_block">Div 1</section>
    <section class="sidebar_block">Div 2</section>
    <section class="sidebar_block">Div 3</section>
    <section class="sidebar_block">Div 4</section>
  </aside>
</div>

关于您评论中的问题：

  1. 实际上，float 是有效的。由于您使用了固定宽度 width: 420px;，可能没有足够的空间让第二个 ul 在同一行中放置。请使用 width: 50%; 或更低的值并查看更改。或者，您可以在更宽的屏幕上查看，例如 1360 像素分辨率。
  2. 是的，适用于较小的设备。
    这是一个基本示例。我使用百分比值来设置列宽。因此，在较小的设备上，列可能变得非常窄。为了防止这种情况，我对 .wrapper 使用了 min-width: 1000px。这将防止列宽变窄，但会在较小的设备上出现水平滚动条。
太酷了，谢谢！当然我是新手，当我问如何将div放在右侧这样一个愚蠢的问题时，这一点非常明显 :) 不过我有几个问题：
  1. 在Main Info-3中，我有两个并排的列表，使用float但它不再起作用了，问题出在哪里？它应该在.main_info3 ul中。 CSS：.main_info3 ul { float: left; width: 420px; }
  2. 为什么你在.wrapper中加入了min-width，是为了更小的设备吗？
 - xantoo
继续回答问题＃1 - 明显是float:left的问题。但是如果没有使用float，我该如何让这些列表并排而不是第二个在下面？ - xantoo
实际上你的 ul 并不是50%宽。它比那更宽。搜索 盒模型 和 CSS 盒尺寸 以了解如何计算元素的宽度（和高度）。同样，如果你使用50%的宽度，就不能使用左边距。 - Iqbal Kabir
是的，使用“width：48.839％”有点有效，但为什么它会忽略背景呢？您可以在jsfiddle中看到列表应该在最暗的背景上，而紫色部分是下一节的。它看起来好像“float”即使对于下一节也仍在工作。 - xantoo
这是 float 属性的行为。如果父元素没有使用 float，而子元素使用了 float，那么父元素不会随着子元素的大小而扩大。你应该做一些功课来发现 float 属性的其他行为。尝试 clearfix hack。 - Iqbal Kabir
谢谢，终于搞定了 :) 我之前是在 lists 上添加 clearfix，而不是 next_section 上，所以一直没生效。 - xantoo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接