テーブルを使わない段組みで

お世話になります。
テーブルを使わずにdivを使って、以下のような段組みを作りました。

あ い
う え

そこで、「う」にあたる情報を消去したとき、自動的に「え」を、「う」があった位置に移動させるようにしたい場合、どのように書いたらよろしいでしょうか？

ご協力よろしくお願いいたします。

No.5 ベストアンサー 回答者： salonpath 回答日時： 2009/09/04 20:55

行ごとに背景色を変更するjavascriptも勉強がてら書いてみました

ただjsは全くの素人なのでおかしな記述があるかもしれません。

■javascript

<script type="text/javascript">
var oddColor="#ffccff";//奇数行の背景色
var evenColor="#ffffce";//偶数行の背景色
//列最大値
var m_row=2;
//row列、line行
var t_row=1;
var t_line=1;

onload=function(){
var boxUL=document.getElementById("box");
var boxLI=boxUL.getElementsByTagName("li");
//
for(var i=0;i<boxLI.length;i++){
//console.log('t_row列数｜'+t_row);
//console.log('t_line行数｜'+t_line);
if(t_line % 2==0){//偶数なら
boxUL.style.background=boxLI[i].style.background=evenColor;
}else{//奇数なら
boxUL.style.background=boxLI[i].style.background=oddColor;
}
//
if(t_row<m_row){
t_row++;
}else{
t_row=1;
t_line++;
}
//
}

}
</script>

この回答への補足

今、改めて動作を確認させていただきました。

そうしたら、
「あああ」「いいい」
「ううう」「えええ」
「えええ」「おおお」
において、「いいい」「えええ」の部分を消すと、私の希望通り、つまり
「あああ」「ううう」
「えええ」「おおお」

と動いてくれますが、左側、つまり「あああ」「ううう」は消去した際、空欄のままになってしまうという状態です。

何度もすみません、もしお時間が許すようであれば、ご協力ください。

補足日時：2009/09/07 11:02

この回答へのお礼

何度もお答えをいただき、ありがとうございます。
週明けに動作を確認したいと思います。

お礼日時：2009/09/04 21:03

No.7 回答者： salonpath 回答日時： 2009/09/07 14:40

>左側、つまり「あああ」「ううう」は消去した際、空欄のままになってしまうという状態です。

いや、floatさせてるので空欄にはならないハズですけど、おかしいな。

「消去」ってどうやってますか？<li>ごと消してますよね？
ご自身でliやaにcss追加してますか？
確認してるブラウザは何ですか？

この回答へのお礼

何度もご回答いただき、ありがとうございます！
はい、ちゃんとなりました！＾＾

あとは、liで、行ごとに背景色を違える、というのが残りました・・・（泣）

今までで充分ご協力いただいたので、これにて一度この質問は締め切ります。

本当に何度もお答えをいただき、ありがとうございました。

お礼日時：2009/09/07 14:59

No.6 回答者： noname#119957 回答日時： 2009/09/06 02:02

float-leftでいいです。

この回答へのお礼

ご意見ありがとうございました。

お礼日時：2009/09/07 09:11

No.4 回答者： salonpath 回答日時： 2009/09/04 20:48

今確認したら、IE6と7でリストマークが表示されてませんでした

リストマークを背景画像に修正しました。
（横10px縦10pxのリストマーク画像を作成して、好きな名前で保存してcssの.blockAA li aの背景部分の「img/background.gif」と差し替えてください）

■html
<div class="blockAA">
<ul id="box">
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
<!--<li><a href="#">ううう</a></li>-->
<li><a href="#">えええ</a></li>
<li><a href="#">おおお</a></li>
<li><a href="#">かかか</a></li>
<li><a href="#">ききき</a></li>
<li><a href="#">くくく</a></li>
<li><a href="#">けけけ</a></li>
<li><a href="#">こここ</a></li>
</ul>
</div>

■css
<style type="text/css">
ul,
li {
padding:0;
margin:0;
line-height:1.3;
}
.blockAA {
width:740px;
/*background:#FFC;*/
}
.blockAA ul {
width:740px;
list-style:none;
}
.blockAA ul li {
float:left;
width:340px;
padding-left:30px;
}
.blockAA li a{
background:url(img/background.gif) no-repeat left center;
/*img/background.gifは横10px縦10pxのリストマーク画像*/
padding-left:20px;
}

/* clearfix */
.blockAA ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for ie */
* html .blockAA ul {
display:inline-table;
}
/* hides from ie-mac \*/
.blockAA ul {
height:1%;
}
/* end hide from ie-mac */
</style>

この回答へのお礼

おはようございます。
NO.6までの回答を試してみましたが、今のところ、私が思うような結果は得られていない状況です。
私の説明不足が原因ですね。
「あああ」「いいい」
「ううう」「えええ」
「おおお」「かかか」

において、「ううう」を削除した際、

「あああ」「いいい」
「えええ」「おおお」
「かかか」
という挙動をつくりたいのですが、なかなか・・・。
もし、お時間があれば、またご協力いただければ大変有り難く存じます。

お礼日時：2009/09/07 09:10

No.3 回答者： salonpath 回答日時： 2009/09/04 16:36

「あああ」「いいい」

「ううう」「えええ」から「ううう」を消したら、以下のような挙動を想定していたんですけれど
「あああ」「いいい」
「えええ」「おおお」
「かかか」「・・・」

[引用]
「あああ」「いいい」
「ううう」「えええ」
の並びも変わりません。
[/引用]
並びが変わらないということは、こうですか？
↓
「あああ」「いいい」
「　　　」「えええ」

しかし次の説明では
>「えええ」が自動的に移動する

並びが変わらないけど移動する？
「あああ」「いいい」
「えええ」
「おおお」「かかか」
？
読解力がなくてすいません。

とりあえず最初にイメージしたものを書きます
■html
<div class="blockAA">
<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
<!--<li><a href="#">ううう</a></li>-->
<li><a href="#">えええ</a></li>
<li><a href="#">おおお</a></li>
<li><a href="#">かかか</a></li>
<li><a href="#">ききき</a></li>
<li><a href="#">くくく</a></li>
<li><a href="#">けけｋ</a></li>
<li><a href="#">こここ</a></li>
</ul>
</div>

■css
ul,li {
padding:0;
margin:0;
line-height:1.3;
}
.blockAA {
width:740px;
background:#FFC;
}
.blockAA ul {
width:740px;
}
.blockAA ul li {
float:left;
width:340px;
list-style:inside;
padding-left:30px;
}

/* clearfix */
.blockAA ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for ie */
* html .blockAA ul {
display:inline-table;
}
/* hides from ie-mac \*/
.blockAA ul {
height:1%;
}
/* end hide from ie-mac */

■ulの背景にまったく色をつけないならこれだけでも
ul,li {
padding:0;
margin:0;
line-height:1.3;
}

.blockAA ul {
width:740px;
}
.blockAA ul li {
float:left;
width:340px;
list-style:inside;
padding-left:30px;
}

No.2 回答者： salonpath 回答日時： 2009/09/04 15:24

ん？？これは、どうゆう仕様ですか？

1行ごと背景色が入れ替わるようですが、質問の条件に書いてないですよね？
今わかりやすくするために追加してくれたんでしょうか？

それと「あああ」や「ううう」などの文章は常に1行なのでしょうか？
また文章が長くなって折り返してしまった場合の挙動はどういったものを想定してますか？

この回答へのお礼

たびたびお答えいただき、ありがとうございます。

背景色は変わりません、「あああ」「いいい」
「ううう」「えええ」
の並びも変わりません。

「ううう」の部分を事情によって消去したときに、その場所に「えええ」が自動的に移動するようにしなければならなくて、いろいろと調べてはいるのですが、今現在、まったくわからずにいます＞＜

お忙しいかとは思いますが、ご協力いただければ幸いです。

お礼日時：2009/09/04 16:03

No.1 回答者： salonpath 回答日時： 2009/09/04 14:36

floatでやってたら勝手に移動すると思うのですが

>テーブルを使わずにdivを使って、以下のような段組みを作りました。
現在はどのように組んでるんですか？

この回答へのお礼

早速のご回答ありがとうございます
div.blocka {
float: left;
width: 50%;
margin-left: 30px;
}

.float-clear {
clear: both;
}
<div style="width: 740px;line-height: 1.3;background-color: #FFFFCE;">

<div class="blocka"><a href="A073.htm" target="_parent" class="style132"> ・ あああ</a></div>

<div class="blockb"><a href="A017.htm" target="_parent" class="style132"> ・いいい </a></div>

</div>

<div style="width: 740px;line-height: 1.3;background-color: #FFCCFF;">

<div class="blocka"><a href="A069.htm" target="_parent" class="style132"> ・ ううう </a></div>

<div class="blockb"><a href="A043.htm" target="_parent" class="style132">・ えええ</a></div>


</div>


<div style="width: 740px;line-height: 1.3;background-color:#FFFFCE;">

<div class="blocka"><a href="A080.htm" target="_parent" class="style132"> ・ おおお</a></div>

<div class="blockb"><a href="A077.htm" target="_parent" class="style132"> ・ かかか</a></div>

</div>

<div style="width: 740px;line-height: 1.3;background-color: #FFCCFF;">

<div class="blocka"><a href="A070.htm" target="_parent" class="style132"> ・ ききき</a></div>

<div class="blockb"><a href="A039.htm" target="_parent" class="style132"> ・ くくく</a></div>

</div>

<div style="width: 740px;line-height: 1.3;background-color:#FFFFCE;">

<div class="blocka"><a href="A016.htm" target="_parent" class="style132"> ・ けけけ</a></div>

<div class="blockb"><a href="A037.htm" target="_parent" class="style132"> ・ こここ</a></div>

</div>

当方初心者のため、間違いはあるかと思いますが、ご容赦を。

お礼日時：2009/09/04 15:02