0

幅が指定されていないヘッダー/コンテナーがあります (したがって、親と同じ長さです)。その中に、2 つの小さな div があります。ここで、最初の 1 つには (設定されたサイズの) 画像のみを含める必要があり、もう 1 つは残りのスペースと同じ大きさにする必要があります。ヘッダーの幅がわからないため、幅を設定できません。純粋なCSSでこれを行うにはどうすればよいですか?

私が最終的に欲しいのは画像であり、次にいくつかのテキストが右上に配置され、次にいくつかのテキストが左の画像の下部に配置されます。これを行うためのより良い方法を知っていますか？

理解しやすいように、次の図を示します。

例

ありがとう、アレクサンダー

編集1：

HTML:

<div class="header">
  <div class="header_left">
    <div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
  </div>
  <div class="header_right">
    <div class="time">18m ago</div>
    <div class="name">Volkswagen</div>
  </div>
</div>

CSS:

.header {
}

.header_left {
  display: inline-block;
}   
  .pic {
    margin: 5px;
  }

.header_right {
  display: inline-block;
}
  .time {
    margin: 5px;
    float: right;
  }
  .name {
    margin: 5px;
    float:left;
  }

色々と試してみた結果、これが最後になるので、今はちょっと面倒です。

4

3 に答える 3

1

html を表示した方が簡単です。これがあなたの説明に基づく例です。ここのフィドルでこれが機能しているのを見ることができます http://jsfiddle.net/Z68ds/18/

.header {
    overflow:hidden;
    padding: 4px;
    background: #ddd;
}

.caption {
    float: right;
    font-size: 0.9em;
}

.avatar {
    float: left;
}

.title {
    margin: 14px 0 0 38px;
}

<div class="header">
    <div class="caption">
        texty text2
    </div>
    <img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
    <div class="title">texty text1</div>
</div>
于 2013-04-27T21:56:49.297 に答える
0

フローティングせずoverflowに幅を設定したくない要素で使用する必要があります。

#left {
  float: left;
  width: 100px;
}

#right {
  overflow: hidden;
}

これにより、#right要素がその親の残りの部分を覆うようになります。余分なマークアップは必要ありません。

jsフィドル

于 2013-04-27T21:51:23.373 に答える
0

これはあなたが達成したいことですか？

<div id="header">
  <img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
  <p id="textRight">texty text2</p>
  <p id="textLeft">texty text1</p>
  <div class="clearer"></div>
</div>

/* CSS */

#logo {
    float: left;
}
#textRight {
    float: right;
}
#textLeft {
    clear: right;
    float: left;
}
.clearer {
    clear: both;
}

ここにフィドルがあります：

http://jsfiddle.net/T26cD/

于 2013-04-27T21:53:55.863 に答える