Попытка выровнять мои элементы <h1> и <p> слева от моего изображения

Question

Попытка выровнять мои элементы <h1> и <p> слева от моего изображения

0

Я пытаюсь выровнять свой заголовок, изображение и абзац слева от моего новостного изображения.

И я использую float для этого, но не работает,

Im имея это:

Но я пытаюсь это сделать:

Вы видите, где может быть проблема?

Моя игра с проблемой Im, имеющей:

http://jsfiddle.net/upH4U/1/

Мой html:

<div id="news-content">
    <h1>News</h1>
    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title=""/> 
        </div>
        <h2><a href="#" >Title of the news</a><br /></h2>
        <span id="date">Tuesday, May, 2014</span>
        <p>
            This is my paragraph and I want to align it to left of my image.
            <a href="#">see more</a>
        </p>  
    </article>

    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title=""/> 
        </div>
        <h2><a href="#" >Title of the news</a><br /></h2>
        <span id="date">Tuesday, May, 2014</span>
        <p>
            This is my paragraph and I want to align it to left of my image.
            <a href="#">see more</a>
        </p>  
    </article>
</div>

Мой css:

#news-content
{
    float:left;
    width:480px;
    background:#f3f3f3;
}

#news-content h1
{
    font-size:20px;
    font-weight:100;
    margin-bottom:10px;
    color:gray;
    text-align:left;
}

#loop-news
{
    width:400px;
    margin-bottom:10px; 
    text-align:center;
}

.img_container
{
    width:160px;
    height: 165px;
    float:left;
    cursor: pointer;
    border:3px solid #ccc; 
}

#loop-news h2 a
{
    font-size:20px;  
    color:#3B5998; 
    text-decoration:none;
    margin:0 auto 0 5px;
    font-weight:100;
    float:left;
}

#loop-news a
{
    font-size:14px; 
    text-decoration:none;
    margin-left:2px;
}

#loop-news #date
{
    font-size:13px; 
    font-weight:normal;
    color:#7a7a7a;  
}

#loop-news p
{
    font-size: 13px;  
    text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    width:300px;
    float:left;
    margin-left:5px;
}

OzzC 06 май 2014, в 02:13

Источник

0

Это то, что вы хотите сделать? Я что-то настроил в коде. codepen.io/katzkode/pen/EBofj
katzkode 06 май 2014, в 00:02

Теги:

html

css

html5

css3

5 ответов

0

Здесь страница, показывающая, как выровнять текст относительно изображения: http://www.w3schools.com/tags/att_img_align.asp

JayRow 05 май 2014, в 22:41

0

Вам нужно очистить свой флоат, добавив clear:left; к тому же классу, который использует float: left. В вашем случае вы можете использовать объявление CSS:

#news-content article { clear: left; }

Кроме того, наличие нескольких элементов с одинаковым идентификатором может иметь неожиданные результаты. Вместо этого вы должны использовать классы.

Sunny Patel 05 май 2014, в 22:33

0

ваша ширина переполнена; не используйте его или не исправьте

    #loop-news p
{
    font-size: 13px;  
    text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    float:left;
    margin-left:5px;
}

Abdullah 05 май 2014, в 21:29

0

меня судили, его работа просто нужна <br /> предварительно <p>
Abdullah 06 май 2014, в 00:03

0

плавайте изображение вправо, как эта скрипка

float:right;

Chris M 05 май 2014, в 21:08

Ещё вопросы

Это то, что вы хотите сделать? Я что-то настроил в коде. codepen.io/katzkode/pen/EBofj
меня судили, его работа просто нужна <br /> предварительно <p>

Varinder · Accepted Answer · 2014-05-05T21-22-00.000Z

быстрый ответ, используйте clearfix - там есть несколько вариантов

CSS

#loop-news
{
    width:400px;
    /*margin-bottom:10px; moving margin to seperator*/
    /*text-align:center;*/
}

#loop-news p
{
    font-size: 13px;  
    /*text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    width:300px;
    float:left;*/
    margin-left:5px;
}

#loop-news {
    overflow:hidden; /*quick clear fix*/
}

.loop-news-content {
    overflow:hidden;
}

#loop-news *:first-child { margin-top:0; }
#loop-news *:last-child { margin-bottom:0; }

#loop-news h2 { margin:0; }
.loop-news-meta { margin-top:0; }

Heres обновленная скрипка http://jsfiddle.net/Varinder/HTNk8/2/

Спасибо, очень хорошее решение на самом деле!