通过div边界的文本

Question

我有三个div列，其中包含这样的文本和一个主标题。我的问题是，如果有可能通过divs边界写出那个标题，它就像在一行中一样。

＆＃13;

＆＃13;

.row {
   display:table-row;
}

.ima{
   display:table-cell;
   width:auto;
   height:200px;
   border:1px solid red;
   padding:10px;
}

＆＃13;

<div class="row">
   <div class="ima"><h1>Title. Pavadinimas, su dideliais parasymais.</h1>
      <p>
         Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta.
         Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
   </div>
   <div class="ima">
      <p>
         Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta.
         Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
   </div>
   <div class="ima">
      <p>
         Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. 
         Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.row {
  display: table-row;
  position: relative;
}

.ima {
  display: table-cell;
  width: auto;
  height: 200px;
  border: 1px solid red;
  padding: 80px 10px 10px;
}

h1 {
  position: absolute;
  top: 0;
}

＆＃13;

<div class="row">
  <div class="ima">
    <h1>Title. Pavadinimas, su dideliais parasymais.</h1>
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以改变html吗？如果是，您可以这样做：

＆＃13;

＆＃13;

.row {}

.ima {
  width: auto;
  height: 200px;
  border: 1px solid red;
  padding: 10px;
}

＆＃13;

<div class="row">
  <h1>Title. Pavadinimas, su dideliais parasymais.</h1>
</div>
<div class="row">
  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以在h1

上使用绝对定位

＆＃13;

＆＃13;

.row {
  display: table-row;
  position: relative;
}

.ima {
  display: table-cell;
  width: auto;
  height: 200px;
  border: 1px solid blue;
  padding: 80px 10px 10px;
}

h1 {
  position: absolute;
  top: 0;
}

＆＃13;

<div class="row">
  <div class="ima">
    <h1>Title. Pavadinimas, su dideliais parasymais.</h1>
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

.table {
  display: table;
  table-layout: fixed;
}
.ima {
  display: table-cell;
  width: auto;
  border: 1px solid #F1F1F1;
  padding: 10px;
}
h1 {
  margin: 0;
}

＆＃13;

<div class="table">
  <div class="row title">
    <div class="ima" colspan="3">
      <h1>Title. Pavadinimas, su dideliais parasymais.</h1>
    </div>
  </div>
  <div class="row">
    <div class="ima">
      <p>Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.<p>
    </div> 
    <div class="ima">
      <p>Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.<p>
    </div>

    <div class="ima">
      <p>Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.<p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用fieldset＆amp;图例标记..您可以查看下面的代码段

＆＃13;

＆＃13;

.row {
  display: table-row;
}

.ima {
  display: table-cell;
  width: auto;
  height: 200px;
  padding: 10px;
  //border: 1px solid red;
}

＆＃13;

 <fieldset>
  <legend>Title. Pavadinimas, su dideliais parasymais.</legend>
<div class="row">  
<div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>

  <div class="ima">
    <p>
      Cia yra paprastas tekstas apie nieka, kad butu uzpildyta paragrafo vieta. Tikiuosi protingi zmones patars teisinga atsakyma.
      <p>
  </div>
  </div>
 </fieldset>

＆＃13;

＆＃13;

＆＃13;