0

だから私がやろうとしているのは、自分の小さなWebサイトのモックアップをHTMLで作成することです。ですから、今まですべてが順調に進んでいます。私がやりたいのは、画像を表示し、その横にタイトルと説明を表示することです。これは、YouTubeと同じです。

例：私が作成しようとしているもの

したがって、現在の方法では、テキストを新しい行にドロップダウンする必要がない場合は完全に機能します。

動作例：タイトルと説明が短い場合に機能します

ただし、そのうちの1つが長すぎると、すべてが台無しになります。たとえば、台無しになります。タイトルが長すぎるとめちゃくちゃになりました

JSフィドルを設定して、皆さんが簡単にできるようにしました。ただし、ブートストラップを使用して設計していることを思い出してください。CSSが非常に長いのは、完全なブートストラップが含まれているためです。ただし、最初の57行だけがカスタム作成のcssです。とにかく、誰かが私のタイトルや説明が長すぎるときにYouTubeのように次の行にドロップするように、誰かが私を助けてくれるなら。

私のHTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/custom.css">
        <title>Comments</title> 
    </head>

    <body>

        <div class="logo">
            <img height="70" width="200" src="/img/logo.png">
        </div>

        <div class="container">

            <div class="leftBar">
                <div class="well">
                    <div class="title">
                        <h3>Mini Title</h3>
                    </div>

                    <hr/>

                    <div class="contentLink">
                        <div class="smallContentImage">
                            <img src="http://i.imgur.com/zesaMhG.gif">
                        </div>

                        <div class="smallContentText">
                            <h5>Title Goes Here</h5>

                            <em>
                                Other Informati
                            </em>
                        </div>
                    </div>

                </div>
            </div>

            <div class="rightBox">
                <div class="well">
                    <div class="title">
                        <h1>Title For Content</h1>
                    </div>
                    <p> CONTENT CONTENT CONTENT </p>
                </div>
            </div>

        </div>

    </body>



</html>

私のCSS

body {

    background #FAFAFA;
}


.title {

    text-align: center;
}

.logo {

    margin-right: auto;
    margin-left: 2%;
    padding-top: 2%;
}

.leftBar
{
    margin-right: auto;
    float: left;
    width: 30%;
    overflow: hidden;
}

.rightBox 
{
    margin-left: 0;
    float: right;
    width: 70%;
}

.contentLink
{
    padding-left: 1%;
    padding-right: 1%;
    width: auto;
    height: auto;
}

.smallContentImage {

    width: 100px;
    height: 100px;
    margin-left: 0;
    margin-right: auto;
    float:left;
}

.smallContentText {
    float: right;
    width: auto;
    margin-left: auto;
    margin-right: 0;
    width: fixed;
}

JSフィドル： http： //jsfiddle.net/BjSv8/

ありがとうございました

4

2 に答える 2

1

のようなものはありませんwidth:fixed。2つのコンテンツアイテムの幅が親の幅に加算されることを確認する必要があります。

于 2013-03-06T04:46:21.037 に答える
1

div の代わりに em を使用した理由はありますか? 「em」の代わりに「div」を使用して幅を定義できれば、問題は解決できます。

<div  style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>

このフィドルを参照してください: http://jsfiddle.net/BjSv8/1/

于 2013-03-06T04:47:51.570 に答える