проблема css с растягиванием среднего div святого грааля

#html #css #layout

#HTML #css #макет

Вопрос:

Кажется, я не могу понять, почему мой средний div ( menu-item-middle класс) внутри menuitem класса не будет растягиваться поперек. Я потратил довольно много времени на это сейчас, и я подумал, что мне лучше опубликовать это, потому что я не могу в этом разобраться. Вот как выглядит мой код.

 .menu-item  div
{
    display:inline-block
}
.menu-item-left
{
    left:0px; float:left; border:1px solid #000000
}
.menu-item-middle
{
    padding-top:5px; padding-bottom:6px; padding-right:5px; left:39px; float:left; border:1px solid #000000
}
.menu-item-right
{
    width:26px; height:44px; right:0px; clear:right; background-image:url('images/Menu_Item_Arrow.jpg'); background-repeat:no-repeat; border:1px solid #000000
}
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div class="menu-item">
                <div class="menu-item-left">
                    <div class="item-corner">
                    </div>
                    <div class="item-icon">
                        <img alt="" height="36" src="images/spacer.gif" width="36" />
                    </div>
                </div>
                <div class="menu-item-middle">
                    <table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px">
                        <tr>
                            <td>
                                <a href="#">
                                <span style="font-family:Verdana; font-size:.95em; font-weight:bold">Technology</span>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span style="font-family:Arial; font-size:.7em; color:#0b83bb">Computers amp;amp; 
                                Office Supplies</span></td>
                        </tr>
                    </table>
                </div>
                <div class="menu-item-right">
                    <img alt="" height="44" src="images/spacer.gif" width="26" />
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-item-left">
                    <div class="item-corner">
                    </div>
                    <div class="item-icon">
                        <img alt="" height="36" src="images/spacer.gif" width="36" />
                    </div>
                </div>
                <div class="menu-item-middle">
                    <table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px">
                        <tr>
                            <td>
                                <a href="#">
                                <span style="font-family:Verdana; font-size:.95em; font-weight:bold">Intersts</span>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span style="font-family:Arial; font-size:.7em; color:#0b83bb">Movies Books amp;amp; 
                                Music</span></td>
                        </tr>
                    </table>
                </div>
                <div class="menu-item-right">
                    <img alt="" height="44" src="images/spacer.gif" width="26" />
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-item-left">
                    <div class="item-corner">
                    </div>
                    <div class="item-icon">
                        <img alt="" height="36" src="images/spacer.gif" width="36" />
                    </div>
                </div>
                <div class="menu-item-middle">
                    <table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px">
                        <tr>
                            <td>
                                <a href="#" style="text-decoration:none; color:#0b83bb">
                                <span style="font-family:Verdana; font-size:.95em; font-weight:bold">
                                Entertainment</span> </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span style="font-family:Arial; font-size:.7em; color:#0b83bb">Software amp;amp; 
                                Digital Games</span></td>
                        </tr>
                    </table>
                </div>
                <div class="menu-item-right">
                    <img alt="" height="44" src="images/spacer.gif" width="26" />
                </div>
            </div>
        </td>
    </tr>
</table>

1. Как это должно выглядеть, не могли бы вы показать нам скриншот того, как бы вы хотели, чтобы это отображалось? p.s. Смешивать таблицы и divs никогда не является хорошей идеей 🙂

Ответ №1:

Это потому, что вы установили float свойство. Если вы хотите сохранить его, попробуйте добавить width: 100% в класс.

1. я удалил плавающие элементы, увеличил ширину до 100%, это не работает

2. Тогда проблема должна быть в ширине TD, содержащего этот div. Попробуйте добавить к нему свойство width.

Ответ №2:

Я думаю, это происходит потому, что содержимое этого div отличается от двух других. Вы можете попробовать с

CSS

 .menu-item-middle {min-width:150px}

Это работает с IE8 amp;