1

私はこれを何時間も調査してきましたが無駄になりました。私は基本的に自分のサイトを古いtable-setupからdiv-setupに変換しています。

これが私がテーブルセットアップで持っていた種類のもののサンプルです：http： //jsfiddle.net/vxgqE/2/

これは、divの設定です：http： //jsfiddle.net/G3bNh/

float：leftとposition：relativeプロパティを使用して、DIVを正しく整列させることができましたが、私が見つけた問題は、右側のセル（上記のリンクを参照）の高さが大きくなると、左側のセルが大きくなることです-これはそうではありませんdivセットアップでも同様の状況で発生します。

これらの2つの中央のセルが常に同じ高さを維持するようにするにはどうすればよいですか？

JavaScriptとjQueryのソリューションがたくさんあることは理解しています...しかし、純粋なHTML / CSSソリューションはありますか？

ご意見ありがとうございます、本当に感謝しています。

ここに画像の説明を入力してください HTMLコード：

<table>
    <tr>
        <td class="top">
            <!-- image1 !-->
        </td>
    </tr>
    <tr>
        <td class="mid1">
            <p>
                exrc fdbodf nosdf ifd onsdfo nj dfnsn a fnl mfasn saf
            </p>
        </td>
        <td class="mid2">
            <p>
                exrc fdbodf nosdf ifd onsdfo nj dfnsn a fnl mfasn saf
            </p>
        </td>
    </tr>
    <tr>
        <td class="bot">
            <!-- image2 !-->            
        </td>
    </tr>
</table>

Divコード：

<html>
<head>


<style type="text/css">
div {border: 1px solid;}

#arrowItem {
position: absolute;
float: left;
width: 100%;
}


#arrowItem-ArrowTop {
background-image: url('img/About-Process_ArrowsTop.png'); 
height: 70px;
width: 300px;
}

#arrowItem-ArrowCenter {
position: absolute;


}

#arrowItem-ArrowBot {
background-image: url('img/About-Process_ArrowsBot.png'); 
height: 70px;
width: 300px;
}

#arrowItem-RightText {
position: absolute;
float: left;
position: relative;
width: 600px;

}

#arrowItem-text1 {
position: relative;
float: left;
width: 300px;
background-color: #d4e0a9; 
border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
}

#arrowItem-text2 {
position: relative;
float: left;
width: 300px;
}

</style>

</head>
<body>




<div id="arrowItem">
 <div id="arrowItem-ArrowTop">
 </div>
 <div id="arrowItem-ArrowCenter">
  <div id="arrowItem-text1">
   <p>
   1234567812345678
   </p>
  </div>
  <div id="arrowItem-text2">
   <p>
   23456723456789
   </p>
  </div>
 </div>
 <div id="arrowItem-ArrowBot">
 </div>
</div>
4

1 に答える 1

1

文字通りいじくり回した1日の後、私はそれを自分で理解しました...そして私はそれがそれほど長くかかったとは信じられません。

解決策は、左側を使用して慎重に配置されたdivをいくつか使用することです。-300の負の属性と負のマージン属性。私の特定のプロジェクトの完全なコードは以下のとおりです。

<html>
<head>


<style type="text/css">
div {border: 0px;}

#arrowItem {
position: relative;
float: left;
width: 100%;
}


#arrowItem-ArrowTop {
position: relative;
background-image: url('img/About-Process_ArrowsTop.png'); 
height: 70px;
width: 300px;
}


#arrowItem-ArrowBot {
position: relative;
background-image: url('img/About-Process_ArrowsBot.png'); 
height: 70px;
width: 300px;
left: -300px;
top: +70px;
margin-top: -70;
}

#arrowItem-RightText {
position: absolute;
float: left;
position: relative;
width: 600px;

}



#arrowItem-text1 {
position: relative;
left: 300px;
width: 500px;
}

#arrowItem-text2 {
position: relative;
top: -100px;
width: 300px;
height: 100px;
background-color: #d4e0a9; 
border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
}

#test1 {
position: absolute;
top: 0px;
left: -300px;
width: 300px;
padding: 0px;
margin: 0px;
height: 100%;

border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
}
</style>

</head>
<body>




<div id="arrowItem">
 <div id="arrowItem-ArrowTop">
 </div>

 <div id="arrowItem-ArrowCenter">
  <div id="arrowItem-text1">
   <p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
   </p>
   <div id="test1">
   ddd
   </div>
   <div id="arrowItem-ArrowBot">
   </div>
  </div>


 </div>

</div>
</html>
于 2012-11-28T22:31:19.443 に答える