每行显示3列而不使用引导程序

时间：2017-10-03 19:28:23

标签： html css wordpress

这是一个wordpress网站http://www.jokerleb.com

每个单元格都有以下代码

.post-block-out {
    margin: 0 0 8px 0;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.post-block-out {
    background: #fff;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 2px 0 0 #E3E4E7;
}

div{
      display: block;

  }



post-block {
    background-color: #fff;
    margin: 0;
    padding: 20px 15px 15px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.post-block-out, .searchblock, .paging, .sidebar-block {
    background: #fff;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 2px 0 0 #E3E4E7;
    }
    
    
 .content_res {
     width: auto;
}


.content_left{
  width:30%; 
  float: none;
  margin: auto;
  padding: auto;
}
<div class="content_res">
<div class="content_left">

<div class="post-block-out ">
	<div class="post-block">
		<div class="post-left">
			<a href="http://www.jokerleb.com/ads/kyosk-2mx2m/" title="Kyosk 2m×2m"><img class="attachment-ad-medium" alt="" title="" src="http://www.jokerleb.com/wp-content/themes/classipress/images/no-thumb-150x150.png"></a>
		</div>
		<div class="post-right full">
	<div class="tags price-wrap">
		<span class="tag-head"><p class="post-price">$1600$</p></span>
	</div>
			<h3><a href="http://www.jokerleb.com/ads/kyosk-2mx2m/">Kyosk 2m×2m</a></h3>
			<div class="clr"></div>
				<p class="post-meta">
		<span class="dashicons-before folder"><a href="http://www.jokerleb.com/ad-category/home-garden/other-home-garden/" rel="tag" class="cp-fixed-color">Other Home &amp; Garden</a></span> <span class="dashicons-before owner"><a href="http://www.jokerleb.com/author/charbel-2/" title="Posts by Charbel" rel="author" class="cp-fixed-color">Charbel</a></span> <span class="dashicons-before clock"><span>August 25, 2017</span></span>
	</p>

			<div class="clr"></div>

			
			<p class="post-desc">Kyosk ma3moul la snack fi haute rekeb fi madfouf PVC ma3 inaraaa</p>

				<p class="stats">23 total views, 0 today</p>

			<div class="clr"></div>

		</div>

		<div class="clr"></div>

	</div><!-- /post-block -->

</div>
</div>
</div>

该代码段正在影响页面上的每个框，它们现在在中间对齐。我希望它们每行3列。

  • 没有引导程序或任何网格库，因为它影响主题，我想也许是因为它有一个名为container的类，所以当使用bootsrap时，容器将所有东西都集中在一起。如果你知道一个与现有代码不冲突的库我就会使用它。

  • 这是一个非常古老的wordpress主题，许多样式存储在数据库中，所以如果我需要添加类，我可能必须在jquery中进行

http://jsfiddle.net/tusharj/ucb0bdmj/

不要担心。你会在网站上看到重复的css代码，不用担心，我在开发阶段使用插件来管理css，我不想要的代码是display:none

我想要的就是每行3列。我试图在第一个左边和右边第三个添加浮动，但问题是它们只在它们的容器内移动。

另外我不知道放在哪里<div class='row'>，我试图用bootstrap来做它是否可行，我没有发现创建新行的正确位置

3 个答案:

答案 0 :(得分：2)

如果这是您所期望的enter image description here

按照此操作使其正常工作：

  1. 删除宽度：类.content_left
    2. 的30％
  2. 添加display: flex; flex-wrap: wrap;以阻止您要展示。 （在这种情况下，div为id =＆＃34; block1＆＃34;
  3. 为每个div添加33％的宽度，并使用post post-block-out

    4. 您可以尝试添加一些边距或填充以区分div。

    重要：我想如果你想避免冲突，这比使用浮动更好。而且，如果你想让它响应，只需使用媒体查询并添加宽度：100％;每个div都有课后封锁

答案 1 :(得分：2)

您可以尝试使用响应式解决方案：

* {margin: 0; padding: 0; box-sizing: border-box}

.content-left {
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  column-count: 3;
  column-gap: 10px;
}

.content-left > .post-block-out {
  position: relative;
  margin-bottom: 10px;
  page-break-inside: avoid;
  break-inside: avoid-column;
  box-shadow: 0 0 1px #000;
}

.content-left > .post-block-out > img {
  display: block;
  width: 460px;
  max-width: 100%;
}

.content-left > .post-block-out > .info {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  color: #fff;
  background: #000;
  opacity: .75;
}

.content-left > .post-block-out > .info > span {
  margin: 0 5px;
}

.content-left > .post-block-out > .info > .title {
  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .content-left {padding: 0 10px}
}

@media (max-width: 768px) {
  .content-left {column-count: 2}
}

@media (max-width: 480px) {
  .content-left {column-count: 1}
}
<div class="content-left">
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/themes/classipress/images/no-thumb-150x150.png" alt="">
    <div class="info">
      <span class="title">Kyosk 2m x 2m</span><span class="price-tag">$1,600.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-250x250.jpeg" alt="">
    <div class="info">
      <span class="title">Apartment For Sale in JBEIL</span><span class="price-tag">$180,000.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/118310-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Apartment for sale in Adonis</span><span class="price-tag">$230,000.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/655212-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Duplex for sale in Al Ghiye</span><span class="price-tag">$125,000.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/584970-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Honda CRV 2012</span><span class="price-tag">$19,999.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/628582-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Malinois puppies For Sale</span><span class="price-tag">$900.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/565460-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Villa for Sale in Chabtin</span><span class="price-tag">$225,000.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/53048-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Shop for Sale in Ain el Roumani</span><span class="price-tag">$140,000.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/601563-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Honda CRV</span><span class="price-tag">$ ???</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/484415-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Apartment in dekwaneh For Rent</span><span class="price-tag">$700.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/4610-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Nissan Pathfinder</span><span class="price-tag">$5,000.00</span>
    </div>
  </div>
  <div class="post-block-out">
    <img src="http://www.jokerleb.com/wp-content/uploads/2017/05/667783-250x250.jpg" alt="">
    <div class="info">
      <span class="title">Land for sale at Ain Kfaa<br>(عين كفاع)</span><span class="price-tag">$100,000.00</span>
    </div>
  </div>
</div>

答案 2 :(得分：1)

.content-left {width:100%; }
.post-block-out { float:left; width:33% }
相关问题
最新问题