Оставете левия div да обвие съдържанието си, преди десният div да бъде преместен под левия

Как да внедря това оформление (което е изградено с помощта на таблица) с DIV?

По принцип искам да имам два div на един ред: Div1 и Div2. Div1 трябва да бъде подравнен вляво, Div2 – вдясно. Div2 също има зададена минимална ширина. Когато ширината не е достатъчна и за двете, тогава Div1 трябва да обвие съдържанието си, давайки място на Div2. Каквото и да съм опитвал, Div2 винаги се премества под Div1, преди съдържанието на Div1 да бъде обвито.

Така че измислих решение, направено с маса. Как да изградя същото оформление с помощта на DIV?

Решение с таблица:

<!DOCTYPE html>
<html>

<head>
<style>
#table {
  width: 100%;
  word-wrap: break-word;
}

#div1 {
  border: 1px solid red;
}

#div2 {
  width: 30%;
  min-width: 250px;
  text-align: right;
  border: 1px solid green;
}
</style>
</head>

<body>

  <table id="table">
    <tr>
      <td id="div1">This text should wrap when window is made smaller.
      <td id="div2">This takes 30% but not less than 250px;
  </table>
</body>

</html>

html css tablelayout
person Andrej    schedule 09.01.2013    source източник
comment
Вашият въпрос е как да направите това, без изобщо да използвате таблици?   -  person sanjeev mk    schedule 09.01.2013

Отговори (4)


arrow_upward
0
arrow_downward

Това ли е нещо, което търсите? http://jsfiddle.net/fFkNW/3/

Промених маркирането да използва divs и актуализирах CSS да използва floats

Ако направите прозореца по-малък, можете да видите червената кутия да започва да се увива около зелената кутия.

HTML

  <div id="div2">This takes 30% but not less than 250px.</div>
  <div id="div1">This text should wrap when window is made smaller.</div>

CSS

#div1 {
  border: 1px solid red;
}

#div2 {
  width: 30%;
  min-width: 250px;
  float: right;
  border: 1px solid green;
}
person Tim Banks    schedule 09.01.2013
comment
OP се опитва да възпроизведе изхода от таблицата, като използва повече семантично маркиране. Вашият резултат е различен. - person Asad Saeeduddin; 09.01.2013
comment
Всъщност търсех нещо подобно. Трябва да го тествам още малко... - person Andrej; 09.01.2013
comment
Еха! Ключът беше да се промени редът на декларацията на div. Когато се опитвах, не опитах да разменям div. Вашето решение решава моя проблем точно както го исках. Това обаче не е точното оформление от въпроса, тъй като някои части от текста от левия Div1 може да преминат под Div2, което не е възможно с таблица. - person Andrej; 09.01.2013

arrow_upward
1
arrow_downward

HTML:

<div id="wrapper">
  <div id="left"></div>
  </div id="right"></div>
</div>

CSS:

#wrapper {
  width: 100%;
  float: left;
}

#left {
  border: 1px solid red;
  float: left;
}

#right {
  width: 30%;
  min-width: 250px;
  text-align: right;
  border: 1px solid green;
  float: left;
}

Не съм го тествал, но ще работи.

За разбирането.

person semir.babajic    schedule 09.01.2013
comment
Това не изглежда, че #left ще се увие около #right jsfiddle.net/fFkNW/7 - person Tim Banks; 09.01.2013
comment
jsfiddle.net/fFkNW - не се пренася тук. И не трябва. Защо мислите, че трябва? Вие не сте човекът, който задава въпроса. - person semir.babajic; 09.01.2013
comment
Не става. Десният div (зелен) скача надолу, когато прозорецът стане по-малък. Вашият HTML не е валиден, моля, поправете го, за да съм сигурен, че съм ви разбрал правилно. - person Andrej; 09.01.2013

arrow_upward
0
arrow_downward

Опитайте да разгледате CSS box-flex.

person phonicx    schedule 09.01.2013

arrow_upward
0
arrow_downward

Един от най-прецизните начини да направите това е просто да използвате divs, показани като таблица:

#table {
  width: 100%;
  word-wrap: break-word;
  display: table;
}
#table > div {
  display: table-row;
}
#div1, #div2 {
  display: table-cell;
}

Можете да видите тук, че изглежда абсолютно същото.

person Asad Saeeduddin    schedule 09.01.2013
comment
Въз основа на примера, към който свързвате, съдържанието в червеното поле не обвива съдържанието в зеленото поле. - person Tim Banks; 09.01.2013
comment
@TimBanks Вижте коментара ми за вашия отговор. За да цитирам OP: Как да изградя същото оформление с помощта на DIV?. Вие правите нещо съвсем различно. - person Asad Saeeduddin; 09.01.2013
comment
Благодаря! Вашето решение изисква добавяне на допълнителни divs, което го прави по-скоро заобиколно решение. Теоретично това е правилният отговор на въпроса ми, но търсех истински начин за изграждане на същото оформление с divs. - person Andrej; 09.01.2013