0

Доброй ночи всем! Скажу сразу - я только вот-вот учусь верстать.

Такая задача: мне нужно сверстать часть сайта, состоящую из 3 блоков, как-то так:

alt text

Два новостных фида один над другим и рядом с ними гармошка-ролловер, которая выезжает/заезжает.

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

Вопрос второй: за счет того, что ролловер не постоянного размера, как это нужно учитывать при верстке?

section {
  width: 73%;
  display: inline-block;
}
#news_part {
  width: 100%;
  height: 300px;
  margin: 0 auto;
}
#news_container {
  width: 100%;
  margin: 10px 0 10px 0;
}
i {
  display: inline-block;
  font-size: 1.2em;
  width: 20px;
}
.date body {
  font-family: "Helvetica Neue Bold", arial, helvetica, sans-serif;
  font-size: 100%;
  margin: 10px;
  color: #fff;
}
.date h1 {
  margin: 0;
  font-weight: normal;
}
.date h2 {
  font-size: 16px;
  font-family: 'Ubuntu', sans-serif;
  text-decoration: none;
}
.date time.icon * {
  display: block;
  width: 100%;
  font-size: 13px;
  ;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}
.date time.icon strong {
  position: absolute;
  top: 0;
  padding: 12px 0;
  color: #fff;
  background-color: #248cec;
}
.date time.icon {
  position: absolute;
}
.date time.icon span {
  width: 100%;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding-top: 50px;
  color: #000000;
  display: inline-block;
  text-align: center;
}
.box {
  width: 100%;
  margin: 0 auto;
  margin: 0 auto;
  display: block;
  padding: 1.25em;
  height: 500px;
  background: #f7f7f7;
  overflow: hidden;
}
.box .acticles {
  width: 45%;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
  border: 1px solid #ccc;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  z-index: 5;
  overflow: hidden;
}
.box .accordion {
  overflow: hidden;
}
.box img {
  float: left;
}
.margin > .date {
  width: 100%;
}
.margin > .nfeed {
  width: 100%;
}
section h1,
.accordion h1 {
  font-size: 24px;
  font-family: 'Ubuntu', sans-serif;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
  background: #f7f7f7;
}
.panel-group,
.panel-group .panel,
.panel-group .panel-heading,
.panel-group .panel-heading a,
.panel-group .panel-title,
.panel-group .panel-title a,
.panel-group .panel-body,
.panel-group .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-radius: 2px;
  border: 0;
}
.panel-group .panel-heading {
  height: 35px;
}
.panel-group .panel-title {
  right: 10px;
}
.panel-group .panel-heading {
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
  float: right;
  position: relative;
  box-sizing: border-box;
}
.panel-group .panel-heading a {
  display: block;
  background: #f4b60d;
  color: #ffffff;
  padding: 15px;
  text-decoration: none;
  position: relative;
  border: 1px solid #CCC;
}
.panel-group .panel-heading a.collapsed {
  background: #f7f7f7;
  color: inherit;
}
.panel-group .panel-heading a:after {
  content: '-';
  position: absolute;
  right: 20px;
  top: 5px;
  font-size: 20px;
}
.panel-group .panel-heading a.collapsed:after {
  content: '+';
}
.panel-group .panel-body {
  background: #f7f7f7;
  padding: 15px;
}
.panel-group .panel {
  background-color: transparent;
}
.panel-group .panel-body p:last-child,
.panel-group .panel-body ul:last-child,
.panel-group .panel-body ol:last-child {
  margin-bottom: 0;
}
.panel-group .panel-heading a:after {
  content: '-';
  position: absolute;
  right: 20px;
  top: 5px;
}
.accordion input:checked + label:before {
  content: '-';
}
.accordion input:not(:checked) + label:before {
  content: '+';
}
.accordion {
  width: 400px;
  margin: 10px auto;
  float: right;
}
.accordion label {
  padding-left: 50px;
}
.accordion input:checked + label:before {
  content: '-';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 42px;
  width: 10px;
  padding: 0 15px;
  height: 100%;
  border-right: 1px solid #CCC;
  text-align: center;
}
.accordion input:not(:checked) + label:before {
  content: '+';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  padding: 0 15px;
  height: 100%;
  border-right: 1px solid #CCC;
  text-align: center;
}
.accordion label {
  font-family: 'Ubuntu', sans-serif;
  padding: 5px 20px 5px 60px;
  position: relative;
  display: block;
  height: 30px;
  cursor: pointer;
  color: #2a2d32;
  line-height: 20px;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #CCC;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.accordion label:hover {
  background: #f4b60d;
}
.accordion input + label {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
  background: #f4b60d;
  color: #ffffff;
}
.accordion input {
  display: none;
}
.accordion .article {
  background: #f7f7f7;
  overflow: hidden;
  height: 0px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.accordion .article p {
  font-style: normal;
  color: #8a8a8a;
  line-height: 20px;
  font-size: 13px;
  padding: 20px;
  background: #f7f7f7;
  font-family: Arial, sans-serif;
}
.accordion input:checked ~ .article {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .article.ac-small {
  height: 155px;
}
.accordion input:checked ~ .article.ac-medium {
  height: 195px;
}
.accordion input:checked ~ .article.ac-large {
  height: 245px;
}
<section id="articles_accord_main_cobtainer">
  <div class="acticles" style="float:left">
    <header>
      <h1> Latest News</h1>
    </header>
    <article class="news">
      <div class="date">
        <time datetime="2014-03-29" class="icon">
          <strong>Jan</strong>
          <span>29</span>
        </time>
        <img src="img/news1.png" alt="">

      </div>

      <h2><a href="/" target="_blank">Advanced Machinery Helps Improve Quality</a></h2>
      <h3>by <a href="/">cmsmasters</a>> Comments (<a href="/">3</a>) </h3>

      <p>Cum sociis natoque penatibus et magnis dis parturient ontesmus. Pro vel nibh et elit mollis commodo et nec augueique Nemo enim ipsam voluptatem quia ptas sit aspernatur samomo enim ipsam voluptatem.</p>
    </article>


    <article class="news">
      <div class="date">
        <time datetime="2014-03-29" class="icon">
          <strong>Jan</strong>
          <span>29</span>
        </time>
        <img src="img/news1.png" alt="">

      </div>

      <h2><a href="/" target="_blank">Advanced Machinery Helps Improve Quality</a></h2>
      <h3>by <a href="/">cmsmasters</a>> Comments (<a href="/">3</a>) </h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient ontesmus. Pro vel nibh et elit mollis commodo et nec augueique Nemo enim ipsam voluptatem quia ptas sit aspernatur samomo enim ipsam voluptatem.</p>

    </article>
  </div>

  <!-- ACCORDION PANEL -->

  <div class="accordion">
    <div>
      <h1> Banner Place</h1>
      <input id="ac-1" name="accordion-1" type="checkbox" />
      <label for="ac-1">Accordion panel 1</label>
      <div class="article ac-small">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
      </div>
    </div>
    <div>
      <input id="ac-2" name="accordion-1" type="checkbox" />
      <label for="ac-2">Accordion panel 2</label>
      <div class="article ac-medium">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi...</p>
      </div>
    </div>
    <div>
      <input id="ac-3" name="accordion-1" type="checkbox" />
      <label for="ac-3">Accordion panel 3</label>
      <div class="article ac-large">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis...</p>
      </div>
    </div>
    <div>
      <input id="ac-4" name="accordion-1" type="checkbox" />
      <label for="ac-4">Accordion panel 4</label>
      <div class="article ac-large">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci...</p>
      </div>
    </div>

  </div>
</section>

Fiddle

1

2 ответа 2

1

Можно сделать так:

<div(float:left, width:40%)>
  >div новостной 1
  >div новостной 2
</div>

<div(float:right w:60%)>
  >div - ваша гармошка
</div>
2
  • сделано, но третий блок все равно внизу, несмотря на то что места достаточно. все три блока float:left, но даже когда пробовала 3-му блоку поставить float:right, он был справа, но внизу!
    – lili
    29 мар 2015 в 0:16
  • проверьте, чтобы у div float: left и right не было padding, margin и border. Потому что они плюсуются к width. 29 мар 2015 в 10:50
0

Если делаете float: right, поставьте этот блок первым.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.