0

CSSの初心者なので、ご容赦ください。

CSSでこのデザインを作成しようとしています:

ここに画像の説明を入力

画像は単にテキストの左側に浮いているだけではありません。画像はテキストよりも背が高く、少しマイナスがありmargin-topます。

ただし、2 つの問題があります。

  1. margin-top を使おうとしたら、画像が上に動いているのに動いている部分が切り取られてしまいます。
  2. テキストを画像より短くすることはできません。常に画像の高さに従います。

そして、私は物事をより複雑にする % を使用する必要があります。

編集 これはhtmlです：

<li class="box">
<img class="picture" src="images/HotPromo/tagPhoto1.png"/>
<p class="name"><b>Name</b></p>
<p class="location"></p>
<p class="hidden"></p>
</li>

そして、これは CSS です:

#listHotPromo{
    background: #c4a76e;
    margin: 0 5% 0 5%;
    width: 90%;
    border-radius: 3%;
    /*show background*/
    overflow: auto;
}

.box{
    background: #e8c07a;
    margin: 5% 5% 10% 5%;
    border-radius: 3%;
    /*show background*/
    overflow: auto;
}

.box img {
    float:left;
    width: 30%;
}

.box p {
    width: 50%;
    float: left;
}

何か助けが必要な場合は、私に尋ねてください。

助けてくれてありがとう:D

4

2 に答える 2

2

これを試してみてください：

CSS:

#wrapper {
  width: 200px;
  height: 100px;
  position: relative;
}
.image {
  width: 50px;
  height: 50px;
  position: absolute;
  top: -15px;
  left: 0;
}

HTML:

<div id="wrapper">
    <div class="image">
        <img src="images/your-image-here.png" alt="" title="" />
    </div>
</div>

もちろん、これらはすべて一例です。必要に応じて変更する必要があります。ただし、テキスト パーツ ラッパーに position: relative を使用し、画像自体に position: absolute を使用すると、テキストがオーバーレイされ、top: 0; を使用して好きな場所に画像を配置できます。左: 0; 右: 0; 下: 0; プロパティ。

それが役立つかどうか教えてください;）

編集：

HTML:

<div id="listHotPromo">
    <div class="box">
        <img src="images/your-image-here.png" alt="" title="" />
        <p><b>Name</b></p>
        <p>Post Location Here</p>
        <p>Post phone number here</p>
    </div>
</div>

CSS:

#listHotPromo{
    width: 600px;
    height: 200px;
    margin: 0 5%;
    background: #c4a76e;
    border-radius: 3%;
    position: relative;
    z-index: 1;
}

.box{
    width: 500px;
    height: 150px;
    margin:  0 auto;
    background: #e8c07a;
    border-radius: 3%;
    position: relative;
    top: 23px;
    z-index: 2;
}

.box img {
    width: 150px;
    height: 150px;
    position: absolute;
    top: -15px;
    left: -20px;
}
.box p {
    width: 350px;
    padding: 0;
    margin: 0;
    float: right;
}

そして、ここにあなたが見ることができるリンクとしての例があります: http://jsfiddle.net/6rUrW/

于 2013-08-19T05:16:02.597 に答える
1

このアプローチを試すことができます：

  • 画像は絶対に配置されます。
  • 画像とテキストのコンテナには、画像のサイズ以上のパディングが残っている必要があります。
  • テキストは通常​​の位置にあります。

  • 画像の配置に負のマージンを使用します。

    マークアップを設定すると、画像の配置が簡単になります。

`

        #divContainer {
            padding-left: 40px;
            display: block
        }
        #myImg {
            position: absolute;
            margin-left: -35px;
        }

`

    <div id="divContainer">
            <img  id="myImg" src="https://www.gravatar.com/avatar/5ae9a98711b2ceeeadf7a25175f19382?s=32&d=identicon&r=PG"/>
             <span id="MySpan">
                <b>PrimaryText</b>
                        <p>SecondaryText</p>
            </span>
          </div>
</div>
于 2013-08-19T05:17:21.667 に答える