Как я могу выровнять текст группы с отдельными виджетами

0

Я хочу, чтобы текст был помечен

"Я хочу, чтобы этот текст был выровнен с нижним виджетами", чтобы выровнять его с нижним виджетами.

Как мне это достичь? HTML ->

<div class="albums">
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=258634938&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px; display=inline;"></iframe>

<h3>Only Built 4 Cuban Linx (1995)</h3>

<p>
"  Most cd I buy, I get sick of in a few weeks or even days. However, this album is so perfectly balanced and groundbreaking that I get chills everytime I listen to it. When I listen to it, it just boggles my mind. " -- A customer
</p>
<p>
" Beats by RZA are sharp like a razor.  " -- A. Sidletsky
</p>
</div>

<div class="albums">
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=328405814&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>

<p>I want this text aligned with the bottom widget</p>
</div>

CSS ->

.albums { 

}
iframe.albumWidget {
  float:right;
  clear: right;
  margin-bottom: 20px;
}

Здесь ссылка на сайт, чтобы вы могли посмотреть http://raekwon.gteaay.com/discs-baby

Здесь ссылка на скриншот, который показывает веб-сайт так, как мне это нужно http://raekwon.gteaay.com

Теги:

2 ответа

0
Лучший ответ

Это работает! И он использует класс (многоразовый, писать один раз и применять класс, где это необходимо), который правильный способ сделать это.

.albums { 
  position: absolute;
}
.reviews {
  float: left;
  height: 50%;
  width: 50%;
}
.albumWidget {
  height: 50%;
  width: 50%;
  float: left;
}

    <section class="albums">

    <section class="reviews">
    <h3>Only Built 4 Cuban Linx (1995)</h3>
    <p>
    "  Most cd I buy, I get sick of in a few weeks or even days. However, this album is so perfectly balanced and groundbreaking that I get chills everytime I listen to it. When I listen to it, it just boggles my mind. " -- A customer
    </p>
    <p>
    " Beats by RZA are sharp like a razor.  " -- A. Sidletsky
    </p>
    </section>
    <iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=258634938&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>


    <section class="reviews">
    <h3>Only Built 4 Cuban Linx II (2009)</h3>
    <p>" Raekwon sound takes listeners back to gritty Shaolin of the 1990s; however, the production does not sound like leftover beats from that era. Instead, it is a fresh, new take on NYC street life and drama. " -- Intellectualista </p>
    </section>
    <iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=328405814&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>


   </section>
Поделиться
0

я не знаю, может ли это помочь.. проверить мою скрипку

http://jsfiddle.net/ayiem999/HFs2k/

.albums { 

}
iframe.albumWidget {
  float:right;
  clear: right;
  margin-bottom: 20px;
}

p{
float:right;
  clear: right;
  margin-bottom: 20px;
}


<div class="albums">
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=258634938&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px; display=inline;"></iframe>

<h3>Only Built 4 Cuban Linx (1995)</h3>

<div>
"  Most cd I buy, I get sick of in a few weeks or even days. However, this album is so perfectly balanced and groundbreaking that I get chills everytime I listen to it. When I listen to it, it just boggles my mind. " -- A customer
</div>
<div>
" Beats by RZA are sharp like a razor.  " -- A. Sidletsky
</div>
</div>

<div class="albums">

<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=328405814&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>
 <p class="hi">I want this text aligned with the bottom widget</p>

</div>
Поделиться
  • 0
    Я хочу, чтобы он был выровнен по верху второго виджета. Понравился текст по 1-му виджету.
  • 0
    как этот ? ... jsfiddle.net/ayiem999/Cg3T2
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню