HTML CSS картинка с текстовым полем сбоку

ProgramBox

HTML CSS картинка с текстовым полем сбоку

Post author:admin
Запись опубликована:1 февраля, 2023
Post category:Вопросы по программированию

#html #css #image #text #box

#HTML #css #изображение #текст #поле

Вопрос:

Нужно получить это (верхнее изображение / поле) :

Но в настоящее время происходит вот что:

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

Ссылка на JsFiddle: http://jsfiddle.net/JkA25 /

(Поскольку я не могу опубликовать только jsfiddle, вот код)

HTML:

 <div class="rightCol1">

    <div class="theBox2"><a href="#">
        <img src="http://imgur.com/o4G7tD0.jpg">
             <div class="txtBox2"><h4>2014 02 16</h4><h5>vasaros <br> krepšinio <br> stovykla <br> ignalinoje 2014</h5>
             </div></a>
     </div>

    <div class="theBox3"><a href="#">
        <img src="http://imgur.com/3Gp62Mt.png">
        <div class="txtBox3"><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo   <br> istoriją </h5>
        </div> </a>
    </div> 

    <div class="theBox3"><a href="#">
        <img src="http://imgur.com/3Gp62Mt.png">
         <div class="txtBox3"><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas  <br> sarpalius ir lukas <br>šukutis</h5>
         </div> </a>

    </div>

CSS:

 .rightCol1{

        float:right;
        margin-top:10px;
    }   

    .theBox2{
        border-radius: 5px;
        width: 483px;
        height: 244px;  
        overflow: hidden;
        position: relative;
        margin: 10px 0px 40px 15px;

    }

    .txtBox2{
        position: absolute;
        height: 244px;
        width: 175px;
        background:url(http://i.imgur.com/sGWRvSp.png?1);
        bottom: 0; 
        left:0px;


    }

    .theBox3{

        width: 234px;
        height: 330px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        margin: 10px 0px 40px 15px;
        display:inline-block;
    }

    .txtBox3{

        position: absolute;
        height: 140px;
        width: 100%;
        background:url(http://i.imgur.com/sGWRvSp.png?1);
        bottom: 0; 
    }

    h4{ 
        padding:0;
        margin:10px 0 10px 15px;
        font-size:13;
        font-weight:bold;
        color:#e6540c;
    }

    h5{ 
        padding:0;
        margin:10px 0 10px 15px;
        font-size:16;
        font-weight:400;
        text-transform:uppercase;
        color:rgb(230,230,230);
    }

1. У вас есть переполнение: скрыто в вашем theBox2 css

2. Я установил поле сверху, чтобы точно определить ширину текстового поля изображение … — текстовое поле ..? какое текстовое поле ..?

3. .theBox2 a img { float: right; }

4. Вы можете либо переместить изображение вправо, либо оставить ему левое поле.

Ответ №1:

Вы можете попробовать приведенный ниже код:

ДЕМОНСТРАЦИЯ

 .theBox2 img{float:right}

Ответ №2:

Вы можете добавить следующие строки, у вас было изображение меньшего размера, а также изменить размер фона. изображение лежало за Div, поэтому просто установите его на правую сторону. Вот код.

 .theBox2 a img {

    float: right;

}

.txtBox2{
    position: absolute;
    height: 244px;
    width: 175px;
    background:url('http://i.imgur.com/sGWRvSp.png?1');
    background-size: 420px;
    bottom: 0; 
    left:0px;


}

Ответ №3:

Просто сделайте так, чтобы горизонтальные изображения плавали правильно.

 <img src="http://imgur.com/o4G7tD0.jpg" style="float:right;">

Изображение не вписывается в заранее определенные размеры, проверьте обновленную скрипку здесь.

Ответ №4:

У вас нет ничего, что могло бы привести к смещению изображения вправо, за пределы текстового поля. Заполнение контейнера позаботится об этом, и текст в абсолютном положении останется там, где он есть:

 .theBox2{
  border-radius: 5px;
  width: 483px;
  height: 244px;    
  overflow: hidden;
  position: relative;
  margin: 10px 0px 40px 15px;
  padding-left: 175px;
  box-sizing: border-box;
}

Пример: http://jsfiddle.net/JkA25/1 /

Ответ №5:

Попробуйте это:

     .theBox2 {
        border-radius: 5px;
        width: 483px;
        height: 244px;
        overflow: hidden;
        position: relative;
        margin: 10px 0px 40px 15px;
        float:left;
    }
    .theBox2 a img {
        float: right;
    }
    .txtBox2 {
        position: absolute;
        height: 244px;
        width: 175px;
        background:url(http://i.imgur.com/sGWRvSp.png?1);
        bottom: 0;
        left:0px;
        float:left;
    }
    .theBox3 {
        width: 234px;
        height: 330px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        margin: 10px 0px 40px 15px;
        float:left;
    }

JSFIddle:

http://jsfiddle.net/JkA25/4

Ответ №6:

Добавьте 100% ширины для изображения под коробкой2.

 .theBox2 img
{
 width:100%;
}

Ответ №7:

Используйте это.

 .theBox2 a img{ float: right; }

Ответ №8:

 Use Below CSS Code:

<!doctype html>
<html lang="en">
<head>
<style>
    .rightCol1{

        float:right;
        margin-top:10px;
        background:#d0d0d0;
        padding:7px;
    }   

    .theBox2{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
/* width: 483px; */
height: 244px;
overflow: hidden;
position: relative;
/* margin: 5px 0px 5px 5px; */

    }
.theBox2 a img{
right:0px; position:absolute;
height: 244px;
width: 308px;}
    .txtBox2{
        position: absolute;
        height: 244px;
        width: 175px;
        background:url(http://i.imgur.com/sGWRvSp.png?1);
        background-position:center;
        bottom: 0; 
        left:0px;


    }
    .theBox2 a{ width:308px;}
    .theBox3{

        width: 234px;
        height: 330px;
        border-radius: 5px;  -moz-border-radius: 5px;  -webkit-border-radius: 5px; 
        overflow: hidden;
        position: relative;
        margin-top: 15px;
        display:inline-block;
    }
.theBox3:first-child{margin-right:10px;} .theBox3:last-child{margin-left:10px;}
    .txtBox3{

        position: absolute;
        height: 140px;
        width: 100%;
        background:url(http://i.imgur.com/sGWRvSp.png?1);
        bottom: 0; 
    }

    h4{ 
        padding:0;
        margin:10px 0 10px 15px;
        font-size:13;
        font-weight:bold;
        color:#e84c3d;
    }

    h5{ 
        padding:0;
        margin:10px 0 10px 15px;
        font-size:25;
        font-weight:400;
        text-transform:uppercase;
        color:rgb(230,230,230);
    }

</style>
</head>
<body>
<div class="rightCol1">
        <div class="theBox2">
            <a href="#">
                <img src="http://imgur.com/o4G7tD0.jpg">
                <div class="txtBox2"><h4>2014 02 16</h4><h5>vasaros <br> krepamp;#353;inio <br> stovykla <br> ignalinoje 2014</h5></div>
            </a>
        </div>
        <div class="theBox3">
            <a href="#">
                <img src="http://imgur.com/3Gp62Mt.png">
                <div class="txtBox3"><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visa klubo   <br> istorija </h5>
                </div> 
            </a>
        </div> 
        <div class="theBox3">
            <a href="#">
                <img src="http://imgur.com/3Gp62Mt.png">
                <div class="txtBox3"><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas   <br> sarpalius ir lukas <br>amp;#353;ukutis</h5>
                </div> 
            </a>            
        </div>
</div>

</body>
</html>