上的元素應用相同高度的第2分列一個div

我想上的元素應用相同高度的DIV中第2分列在我的live blog內。上的元素應用相同高度的第2分列一個div

目前輸出類似下面的東西：

我所要的輸出是類似如下：

我做些什麼來證明這是在加入高度文章CSS，但如果你在PX增加高度這一項纔有效。我試圖找到一個「響應式」的方式來做到這一點。

------ ----編輯

示例代碼：

.izq{ 
 
    float: left; 
 
\t margin-left: 0px; 
 
    border: 1px solid #000; 
 
    width: 48%; 
 
    clear: both; 
 
\t margin-left: 0; 
 
    border: 1px solid; 
 
} 
 
.der{ 
 
    float: right; 
 
\t margin-right: 2.564102564102564%; 
 
    width: 48%; 
 
    border: 1px solid; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div class="cotainer"> 
 
     <article class="izq">art1</article> 
 
     <article class="der">art2<p>contiene 1 parrafo</article> 
 
     <article class="izq">art3 mas texto <p> otra parrafo <p> otro parrafo</article> 
 
     <article class="der">art4<br> mas texto<br> mas texto</article> 
 
     <article class="izq">art5 <p> un par de parrafos </article> 
 
     <article class="der">art6 <p> articulo 6 contiene <p> 4 parrafos en total<p> contando este</article> 
 
    </div> 
 
    </body> 
 
</html>

來源

2017-04-13 manespgav

檢查了這一點http://stackoverflow.com/a/10222806/6003350 –

請你把你的代碼在這裏對您的信息？ – Grinex

你最簡單的解決方案是包括jQuery庫到您的項目，並使用下面的代碼時，文件被正確加載，將運行，並會做的伎倆爲您服務。

jQuery庫源：你需要一旦文件被正確加載到執行

https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

代碼。

$(document).ready(function(){ 

    var maxHeight=0; 

    $('article.one-half').each(function(){ 
     if($(this).height()>maxHeight) maxHeight = $(this).height(); 
    }); 

    $('article.one-half').each(function(){ 
     $(this).height(maxHeight); 
    }); 

});

您可以測試上述解決您的live blog

所有你需要做的就是按F12打開你的博客在谷歌瀏覽器，並轉到開發人員工具您可以右鍵單擊並從上下文菜單中選擇檢查元素，然後選擇控制檯選項卡。

一旦你在控制檯，所有你需要做的就是用下面的代碼暫時到自己的博客包括了jQuery：

var jq = document.createElement('script'); 
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"; 
document.getElementsByTagName('head')[0].appendChild(jq);

一旦您已成功列入了jQuery到您的網頁，你有要做的是粘貼以下代碼並按輸入。你會得到你想要的結果。

P.S.這只是用於測試目的。如果你想實現它，你必須首先將jQuery庫包含到你的博客，然後使用這個腳本。

正如您編輯您的問題並添加了一個示例。所以如果我使用你的例子，它會是這樣的。

$(document).ready(function(){ 
 

 
    var maxHeight=0; 
 

 
    $('article.izq,article.der').each(function(){ 
 
     if($(this).height()>maxHeight) maxHeight = $(this).height(); 
 
    }); 
 

 
    $('article.izq,article.der').each(function(){ 
 
     $(this).height(maxHeight); 
 
    }); 
 

 
});

.izq { 
 
    float: left; 
 
    margin-left: 0px; 
 
    border: 1px solid #000; 
 
    width: 48%; 
 
    clear: both; 
 
    margin-left: 0; 
 
    border: 1px solid; 
 
} 
 

 
.der { 
 
    float: right; 
 
    margin-right: 2.564102564102564%; 
 
    width: 48%; 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="cotainer"> 
 
    <article class="izq">art1</article> 
 
    <article class="der">art2 
 
     <p>contiene 1 parrafo</article> 
 
    <article class="izq">art3 mas texto 
 
     <p> otra parrafo 
 
     <p> otro parrafo</article> 
 
    <article class="der">art4<br> mas texto<br> mas texto</article> 
 
    <article class="izq">art5 
 
     <p> un par de parrafos </article> 
 
    <article class="der">art6 
 
     <p> articulo 6 contiene 
 
     <p> 4 parrafos en total 
 
      <p> contando este</article> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-04-13 13:55:15

感謝您的回答，但我解決不了。我正在使用firefox，並將您的代碼添加到js控制檯，沒有任何內容出現。 – manespgav

@manespgav它只是用於測試。如果你把這個代碼放到你的應用程序中，它肯定會起作用。 Firefox不允許運行時添加庫，這就是爲什麼開發人員現在使用Chrome中的開發人員工具一天... –

您沒有提供代碼，我無法從這裏更改您的代碼。所以我所能做的就是爲您提供真正適用於所有瀏覽器的解決方案（您可以在任何標準瀏覽器中查看它），它肯定會起作用。如果你不能在這裏粘貼代碼，那麼你可以使用此代碼，並將其粘貼到您的應用程序會甚至沒有一個單一的問題肯定工作。 :) –

您可以設置兩篇文章中一行和合適本文的最大高度。

<div class="row"> 
    <article id=1....... 
    <article id=2.... 
</div>

鎖定我們在bootstrap row上執行。

來源

2017-04-13 13:32:49

據我所知，是有不同高度的行的問題？

我建議使用引導程序，你會得到這免費的。

<div class="row"></div>...

Here is example

來源

2017-04-13 14:02:32

上的元素應用相同高度的第2分列一個div

回答

相關問題