2

私はhtml/CSSが初めてで、2つの画像の間にテキストを入れようとしています。次のコードを使用して、それを行うことができました。しかし、テキストが多すぎると、 に示すように形式が乱れますfigure 1。私のウェブサイトを のように見せる方法を教えてくださいFigure 2。

<!DOCTYPE html>
<html>
<body>
  <div class="header">
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a>
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
  </div>
</body>
</html>

図1： ここに画像の説明を入力


図 2: ここに画像の説明を入力

4

5 に答える 5

2

JSフィドル

すべての要素をフロートさせ、テキストを div でラップしてから、テキストを含む div に幅を割り当てることができます。これは、インライン スタイルを使用するか、例に示すように別のスタイル シートで行うことができます。

追加されたスタイル:

img {
  float: left;
}
#text {
  width: 300px;
  float: left;
}
于 2013-10-31T02:51:48.893 に答える
1

簡単な修正として、HTML テーブルを使用します。単一の行 3 列のテーブルが機能alignし、<td>タグおよび/またはタグの pic サイズで遊ぶだけ<img>です。あなたが求めていることを実行できる属性がたくさんあります。http://www.w3schools.com/html/html_tables.aspをご覧ください

<!DOCTYPE html>
<html>


<body>
    <div class="header">
        <table>
            <tr>
                <td>
                    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
                </td>
                <td>
                    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering any aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.
                    </a>
                </td>
                <td>
                    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
                </td>
            <tr>
        </table>
    </div>

</body>
</html>
于 2013-10-31T03:21:17.307 に答える
0

このようなことを試してください

<img style="float:left" /><div style="float:left">All your text</div><img/>
于 2013-10-31T02:52:17.990 に答える
0

次のようなテーブルを使用できます: http://jsfiddle.net/bTSNj/

<div class="header">
  <table>
    <tr>
      <td> 
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
      </td>
      <td>
        <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a>
      </td>
      <td>
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
      </td>
    </tr>
  </table>
</div>

または、フロートを使用して div を使用できます: http://jsfiddle.net/j94PP/

<div class="header">
  <div class="column1">
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
  </div>
  <div class="columtext">
    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.
    </a>
  </div>
  <div class="column3">
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
  </div>
</div>
于 2013-10-31T02:57:55.703 に答える
0

中央の列の動的な幅が必要な場合、これはうまく機能します: http://jsfiddle.net/SNMQm/6/

HTML:

<div class="header">
    <div class="content-right">
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
    </div>

    <div class="content-left">
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
    </div>
    <div class="content">

        <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a>
    </div>
</div>

CSS:

.content-right {
    float: right;
    width: 130px;
}
.content-left {
    float: left;
    width: 130px;
}
.content {
    margin: 0 150px;
    width:100%;
}
于 2013-10-31T03:14:39.027 に答える