У меня есть div внутри другого div. И я хочу, чтобы он был помещен в левый нижний угол красной рамки, но он не отвечает на: bottom:0; left:0;
.Почему мой div не отвечает на нижнюю и левую
Это зеленый ящик.
EDIT: Я так не обращая внимания.
У меня есть div внутри другого div. И я хочу, чтобы он был помещен в левый нижний угол красной рамки, но он не отвечает на: bottom:0; left:0;
.Почему мой div не отвечает на нижнюю и левую
Это зеленый ящик.
EDIT: Я так не обращая внимания.
.portfoliotekst {
padding-top:1px;
top:0;
width:300px;
height: 340px;
background-color:red;
position:relative; /* add this to specify its position */
}
.viewwebsite {
text-align:center;
bottom:0;
left:0;
margin-top:50px;
line-height:56px;
width:200px;
background-color:#81b63a;
position:relative;
font-size:14pt;
position:absolute; /* add this to specify its position wrt its parent */
}
.portfolioitem{
\t margin-top:11px;
\t width:100%;
height:auto;
border-bottom:5px solid #000;
}
.borderbottom{
\t margin-top:20px;
\t border-bottom: 3px solid #8cc63f;
}
.portfolioimg{ display:inline-block; }
.portfolioitem img{
\t display:block;
\t height:340px;
\t width:331px;
}
.portfolioinfo{
\t display:inline-block;
background-color:yellow;
\t height:340px;
width:560px;
}
\t .portfoliotekst{
padding-top:1px;
\t \t top:0;
width:300px;
height: 340px;
background-color:red;
position : relative;
}
\t .viewwebsite{
\t \t text-align:center;
\t \t bottom:0;
\t \t left:0;
margin-top:50px;
\t \t line-height:56px;
\t \t width:200px;
\t \t background-color:#81b63a;
\t \t position:absolute;
\t \t font-size:14pt;
\t }
\t #page-main .viewwebsite a{
\t \t color:#fff !important;
\t \t text-decoration:none;
\t }
.centertekst{ margin:0 auto; }
.topmargin { margin-top:40px; }
.left{ float: left; }
.right{ float: right; }
<h2 class="borderbottom">MET Heerhugowaard</h2>
<div class="portfolioitem">
\t <div class="portfolioimg left">
\t \t <img src="/images/methhw.png" height="680" width="663"/>
\t </div>
\t <div class="portfolioinfo">
\t \t <div class="portfoliotekst centertekst">
\t \t \t <h2>Beschrijving</h2>
\t \t \t Insert beschrijving here
\t \t \t
\t \t \t <h2>Technieken</h2>
\t \t \t Insert Technieken here
<div class="viewwebsite">
<a href="">Bekijk de website</a>
</div>
\t \t </div>
\t </div>
</div>
Помните, что вам нужно сделать что-то подобное:
relative
Positio пabsolute
позицииВеселитесь с CSS!
позиция родительского элемента –
Попробуйте просто добавьте позицию: относительно '.portfoliotekst' и измените позицию' position: relative' на 'positio: absolute'to viewwebsite. –