Question

我想知道是否可以像这样对网页进行转换：

到此：

正在开发中使用的一些代码用于获取第一张图像：

/** CSS **/
div.Testata35, div.Testata25, div.Testata70Inner, div.Testata29Inner, div.Testata15Inner {
    background-color: #C0C0C0;
    float: left;
}
div.Testata35, div.Testata25 {
    margin-bottom: 0.2%;
    margin-right: 1%;
    margin-top: 0.2%;
    padding-bottom: 0.2%;
    padding-left: 1%;
    padding-top: 0.2%;
}
div.Testata35 {
    width: 35.5%;
}
div.Testata25 {
    width: 23%;
}
div.Valore35, div.Valore25 {
    float: left;
    margin-top: 0.2%; 
    overflow: auto;
    padding-bottom: 0.2%;
    padding-left: 1%;
    padding-top: 0.2%;
}
div.Valore35 {
    margin-right: 2.5%;
    width: 34%;
}
div.Valore25 {
    margin-right: 1%;
    width: 23%; 
}
<!--  HTML -->
<div class="ClrOvFlw">
        <div class="PrimaSx">
            <div class="ClrOvFlw">
                <div id="T1" class="Testata35">Modello</div>
                <div id="T1A" class="Testata35">Linea</div>
                <div id="T2" class="Testata25A">
                    <div style="clear: left; float: left; width: 70%;">Standard</div>
                    <div style="clear: right; float: right; width: 20%; z-index: 1; overflow: auto;">
                        <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa">
                    </div>
            </div>
            <div class="ClrOvFlw">
                <div id="V1" class="Valore35">BELLARIA</div>
                <div id="V1A" class="Valore35">MODULAR</div>
                <div id="V2" class="Valore25A">EN ISO 20345:2011</div>
            </div>
        </div>
        <div class="Valore25B">
        </div>
    </div>
<div class="ClrOvFlw">
        <div id="T3" class="Testata35">Codice Articolo</div>
        <div id="T4" class="Testata35">Protezione</div>
        <div id="T5" class="Testata25">Disponibilit&agrave; a Magazzino</div>
    </div>
    <div class="ClrOvFlw">
        <div id="V3" class="Valore35">83297-07LL</div>
        <div id="V4" class="Valore35">S1P SRC</div>
        <div id="V5" class="Valore25">
            <img id="V5Img" src="FotoMagazzino\maga2-ITA.jpg" alt="Disponibilità">
        </div>
    </div>

正如您所看到的，我已经尝试了一些东西来实现第二张图片中显示的结果，但没有成功。旁注：我不是专业的HTML / CSS开发人员，所以我的代码＆＃34;并不是最佳实践提示。

修改：

正如你们许多人所建议的那样，我以这种方式更新了我的代码：

<div class="ClrOvFlw">
                <div id="T1" class="Testata35">Modello</div>
                <div id="T1A" class="Testata35">Linea</div>
                <div id="T2" class="Testata25A">
                    <div style="float: left; clear: left;">Standard</div>
                    <div class="Valore25B" style="float: right; clear: right; position: relative;">
                        <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; display : block; width: 100%; height: 100%;">
                    </div>
                </div>
            </div>

与上述相同的CSS。我的结果：

编辑2：

根据Fils的建议，我更新了我的代码如下：

<div id="T2" class="Testata25A">
    <div style=" clear: left; float: left;">Standard</div>
    <div class="Valore25B" style="position: relative; overflow: auto;">&nbsp;
        <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; right: 0px;overflow: visible; height: 100px;">
    </div>
</div>

得到这个结果：

我想我在跟踪你的提示人员时做错了什么。

Answer 1

你可以使用position：absolute;如果您可以保证总有足够的空间可以显示整个图像，那么就可以在该图像上显示：

＆＃13;

var loadOnce : [String] = []

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{

    let cell = tableView.dequeueReusableCellWithIdentifier("ProfileActivities", forIndexPath: indexPath) as! ProfileActivitiesTableViewCell


    if !loadOnce.contains("\(indexPath.row)") {

        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), {
            let LocationImage = self.postmap[indexPath.row]
            let LocationImageUrl = NSURL(string: LocationImage)
            let LocationImageData = NSData(contentsOfURL: LocationImageUrl!)

            let ProfileImage = self.postimg[indexPath.row]
            let ProfileImageUrl = NSURL(string: ProfileImage)
            let ProfileImageData = NSData(contentsOfURL: ProfileImageUrl!)

            dispatch_async(dispatch_get_main_queue(), {
                cell.locationImg.image = UIImage(data: LocationImageData!)
                cell.activitesProfileImg.image = UIImage(data: ProfileImageData!)
            });
        });
        loadOnce.append("\(indexPath.row)")

    }
    return cell
}

＆＃13;

另外你可能需要添加位置：relative;在图像的父级上，以确保绝对定位的元素将放置在页面的正确部分。

Answer 2

将图像保持器设置为绝对位置：

这是未经测试但应该给你一个想法

<div style="position: absolute; top: 0; right: 0; width: 20%; z-index: 1; overflow: auto;">
    <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa">
</div>

Answer 3

如果你绝对放置<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/option_percent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:singleLine="true" android:gravity="center" android:ems="3" android:visibility="invisible"/> <RadioButton android:id="@+id/option_radio" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_alignLeft="@id/option_percent" android:layout_alignRight="@id/option_percent" android:gravity="center"/> <TextView android:id="@+id/option_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_toRightOf="@id/option_percent"/> </RelativeLayout>，它将忽略包装。

img

Answer 4

也许你可以通过在包装图像的div中添加position: relative;并添加

来实现

position: absolute;
top: 25px; 
margin-left: 10px;

到图像。你的代码应该是这样的，

<div style="width: 20%;position: relative;">
<img id="V25BImg" src="logo.png" alt="Marchio Normativa" data-pin-nopin="true" style="position: absolute;top: 25px; margin-left: 10px;
">
</div>

检查一下 https://jsfiddle.net/1w772kgg/1/

Answer 5

如果您需要正确的解决方案，除非绝对必要，否则请勿使用绝对定位。浮动元素可以从其父容器中浮出，如果：

parent是overflow:auto和
在元素之后没有相关的清算对象（同一侧的CSS clear，太宽的行，overflow:hidden块元素等。）

See float rules here.

尝试提供此条件。

图像在html页面中没有溢出

5 个答案: