0

次のようなdivボックスがあります。

.productholder
{
width: 954px;
margin-left: 175px;
margin-bottom: 30px;
background-color: white; 
border-style:solid;
border-width: 1px;
border-color: #d2d2d2;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(50%, white), color-stop(170%, #f6f6f6)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #f6f6f6 150%); 
}

そして、私はこの例の写真のようなテキストとimgの構造を取得しようとしています:

Divbox

しかし、私はそれを写真のように正確に得ることができないようです.この例の写真のようにボックスをどのように見せることができるかについて、どんな種類の助けもいただければ幸いです.

私はこれまでにこれを試しました：

<div class="productholder">  
  <img src="url" alt="" />
  <h2>Titletext</h2> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamu. etc</p>       
  <input type="submit" value="More">
  <p>$599</p>
  <input type="submit" value="Buy">                                    
</div>

img{
float:left;
}

h2{
float:left;
font-size: 14px;
}

どんな種類の助けも大歓迎です！

4

3 に答える 3

4

ここにアイデアがあります -デモ

HTML

<div class="productholder">  
    <img src="http://lorempixel.com/100/100" alt="" />

    <div class="productinfo">
        <h2>Titletext</h2> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamu. etc</p>       
        <input type="submit" value="More">
    </div>

    <div class="productprice">
        <h2>$599</h2>
        <input type="submit" value="Buy">
    </div>        
</div>​

CSS

.productholder {
    width: 954px;
    margin-bottom: 30px;
    background-color: white; 
    border-style:solid;
    border-width: 1px;
    border-color: #d2d2d2;

    /* gradients */
    background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%, white), color-stop(50%, white), color-stop(170%, #f6f6f6)); 
    background: -moz-linear-gradient(top, white 0%, white 55%, #f6f6f6 150%); 
}

.productholder img {
    display: inline-block;
    margin: 20px;
}

.productinfo {
    border: 1px solid #ccc;
    display: inline-block;
    margin: 20px 0;
    vertical-align: top;
    width: 500px;
}

.productinfo input {
    float: right;
    margin-top: 20px;
}

.productprice {
    border: 1px solid #ccc;
    width: 150px;
    float: right;
    margin: 20px;
    text-align: center;
}
​
于 2012-10-29T23:59:47.700 に答える
0

画像の場合、h2と最初のpはこれを行います 

.productholder{
width: 734px;
padding-left: 220px;
}
.productholder img{
float:left;
margin: 10px;
max-width: 200px;
}

次に、2番目のpaクラス名を指定margin-right:10px; し、入力に対してAndを使用して右にフロートします。

input{
position: absolute;
bottom: 5px;
right: 10px;
}

ラフスケッチですが、ほぼ正しいはずです。

于 2012-10-29T23:57:45.597 に答える
0

簡単なコーディングを使用します。

HTML:

<div class="wrapper">

    <div class="box-one">dfgdfg</div>
    <div class="box-two">dfgdfgdfgdfg</div>
    <div class="box-three">dfgdfgdfgdfg</div>
    <div class="clear"></div>

</div>

CSS:

.clear{
    clear:both;
}

.wrapper{
    width:450px;
    background:#A4A4A4;
}

.box-one{
    float:left;
    width:80px;
}

.box-two{
    float:left;
    width:300x;
}

.box-three{
    float:right;
    width:70px;
}

スケルトンヒアリングを入れました。CSSをカスタマイズしてご利用ください。乾杯.....

于 2012-11-01T17:15:01.943 に答える