Вкладки с кодом неисправности?

ProgramBox

Вкладки с кодом неисправности?

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#html #css #tabs

#HTML #css #вкладки

Вопрос:

У меня появился новый участник…. У меня проблема с веб-программированием, которая не может быть решена. Проблемный код, который я hastt что-либо вкладки просто не делают…

http://8pic.ir/images/mrghe6ey1a8wkbxjefzw.png

Теперь мои собственные вкладки. И HTML-код и стиль, и я ввел картинку. Но я действительно хочу Mote … Теперь, что мне ввести HTML-код и стиль, который выглядит как над ним:

Эта ошибка проверяет коды от? Эти коды связаны с вкладками.

http://Trainbit.com/files/1222191884/Tabs_Style_amp_HTML.txt

HTML:

 <div class="list-wrap">
<div class="post-list">
<div class="img-box">
<img src="/<?php bloginfo('template_url'); ?>/image/1.png" />
                    </div>
                    <div class="text-slider">
                    <a href="#">Permalink to Post With Featured</a>
                    <br/>
                    2014 17 June
                    </div>                   
</div>
<div class="post-list">
<div class="img-box">
<img src="/<?php bloginfo('template_url'); ?>/image/1.png" />
                    </div>
                    <div class="text-slider">
                    <a href="#">Permalink to Post With Featured</a>
                    <br/>
                    2014 17 June
                    </div>                   
</div>
</div>
<div class="post-list">
<div class="img-box">
<img src="/<?php bloginfo('template_url'); ?>/image/1.png" />
                    </div>
                    <div class="text-slider">
                    <a href="#">Permalink to Post With Featured</a>
                    <br/>
                    2014 17 June
                    </div>                   
</div>
</div>

CSS:

 .img-box{
    width:89px;
    height:89px;
    margin:10px 10px;
    float:left;
    padding-left:-5px;
    }
.img-box img{
    width:89px;
    height:89px;
    float:left;
    }
.text-slider{
    margin:10px;
    font-size:11px;
    float:right;
    }
.post-list a{
    text-decoration:none;
    font-size:13px;
    color:#7b7c7c;
    float:right;
    }
.text-slider a:hover{
    color:#54d5d5;
    }

Спасибо, я отправлю ответ 🙂

1. Я предполагаю, что английский не является вашим родным языком; возможно ли, чтобы кто-то, чьему знанию английского языка вы доверяете, рассмотрел ваш вопрос (на вашем родном языке) и посмотрел, могут ли они предложить лучший перевод? Как бы то ни было, я понятия не имею, в чем проблема.

2. Вы хотите, чтобы каждая из записей вашего списка располагалась вертикально, но прямо сейчас они текут неправильно и делают странные вещи с изображениями. Я на правильном пути с этим?

3. Привет… Извините за плохое написание на английском….

4. @ndm13: Если вы хотите просмотреть первую фотографию, похожую на картинку слева, а также на правое и левое изображение, чтобы увидеть список, и теперь я хочу, чтобы слева был вертикальный список миниатюр, а слева написано Tabs left — полная противоположность…

5. Мой ответ решает вашу проблему или проблема в другом? Просмотрите JSFiddle, и если это не то, что вы ищете, возможно, мы можем попытаться прояснить это.

Ответ №1:

Я думаю, что я исправил вашу проблему. Вы должны указать ширину и высоту, чтобы ваши <div> s работали так, как вы хотите. Посмотрите на это: http://jsfiddle.net/P6gkx /

HTML:

 <div class="list-wrap">
    <div class="post-list">
        <div class="img-box">
            <img src="/<?php bloginfo('template_url'); ?>/image/1.png" />
        </div>
        <div class="text-slider"> <a href="#">Permalink to Post With Featured</a>

            <br/>2014 17 June</div>
    </div>
    <div class="post-list">
        <div class="img-box">
            <img src="/<?php bloginfo('template_url'); ?>/image/1.png" />
        </div>
        <div class="text-slider"> <a href="#">Permalink to Post With Featured</a>

            <br/>2014 17 June</div>
    </div>
</div>
<div class="post-list">
    <div class="img-box">
        <img src="/<?php bloginfo('template_url'); ?>/image/1.png" />
    </div>
    <div class="text-slider"> <a href="#">Permalink to Post With Featured</a>

        <br/>2014 17 June</div>
</div>
</div>

CSS:

 .img-box {
    width:89px;
    height:89px;
    margin:10px 10px;
    float:left;
    padding-left:-5px;
}
.img-box img {
    width:89px;
    height:89px;
    float:left;
}
.text-slider {
    margin:10px;
    font-size:11px;
    float:left;
}
.post-list a {
    text-decoration:none;
    font-size:13px;
    color:#7b7c7c;
    float:left;
}
.text-slider a:hover {
    color:#54d5d5;
}

.post-list{
    width:310px;
    display:block;
    height:120px;
    background-color:#ddd;
    margin-bottom:5px;
}

1. Извините за баланс списка после ширины и высоты кода? Например, вы написали:.post-list{ ширина: 314 пикселей; высота: 110 пикселей; отображение: блок; цвет фона: #ddd; поле внизу: 2 пикселя; }

2. По сути, вы создаете поле для размещения своего сообщения. Раньше поле могло быть таким большим, каким оно хотело быть, и это вызывало проблемы. Теперь, когда у него есть размеры, все помещается там, где должно.

3. Опять же, предварительно встроенное окно для определения ширины и высоты, вы не выливаете меня снова?

4. Извините, возникли некоторые проблемы с пониманием. Если вы говорите об отсутствии переполнения, вы можете установить overflow:hidden или что-то в этом роде. Если вы хотите, чтобы он переполнялся, это потребует больше работы. Я не знаю, куда это приведет к переполнению.

5. Вы бы добавили его в .post-list{}

Метки: Вкладки с кодом неисправности?