通過div邊界的文本文本

Question

我有三個div列，其中有這樣的文本和一個主要標題。我的問題是，如果有可能通過div邊框來寫這個標題，那它就像一行。

.row { 
 
    display:table-row; 
 
} 
 

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

<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>

Answer 1

.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; 
 
}

<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>

Answer 2

你能更改HTML？如果是的話，你可以簡單地這樣做：

.row {} 
 

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

<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>

或者你可以在你的h1

.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; 
 
}

<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>

Answer 3

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

<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>

使用絕對定位

Answer 4

使用FIELDSET &傳奇標籤..你可以檢查以下片斷

.row { 
 
    display: table-row; 
 
} 
 

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

<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>