همه آموزش ها با 50 درصد تخفیف تو جشنواره بهاره توسینسو
50 درصد تخفیف
مانده تا پایان تخفیف ها
مانده تا پایان تخفیف ها

قرار دادن یک عکس در کنار یک متن (html - css)

بپرسید

0

{{ digitTrunc(content.likes) }}

من یه منو باز شوند عمودی دارم و میخوام در کنار لیست های منو عکس مربوط به اون رو بزارم

میخوام در کنار "کتاب" یه عکس کتاب قرار بدم (به طرز زیبایی قرار بگیره - ایکن نباشه! عکس باشه با فرمت png)

بهترین روش برای این کار چیه؟

<style>
    @import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
    @import url(http://fonts.googleapis.com/css?family=Pacifico);
    body {
        font-family: "Lato", Helvetica, Arial;
        font-size: 16px;
    }

    *, *:before, *:after {
        -webkit-border-sizing: border-box;
        -moz-border-sizing: border-box;
        border-sizing: border-box;
    }

    .container-kazerun {
        width: 300px;
        margin: 1px auto;
    }
    .container-kazerun > ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
    }

    .dropdown-kazerun {
        position: relative;
    }
    .dropdown-kazerun a {
        text-decoration: none;
      
    }
    .dropdown-kazerun [data-toggle="dropdown-kazerun"] {
        display: block;
       text-align:right;
        color: white;
        background: #C0392B;
        -moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
        -webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
        box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
        padding: 10px;
    }
    .dropdown-kazerun [data-toggle="dropdown-kazerun"]:hover {
        background: #cd3d2e;
    }
    .dropdown-kazerun [data-toggle="dropdown-kazerun"]:before {
        position: absolute;
        content: '\25BC';
        font-size: 0.7em;
        color: #fff;
        top: 13px;
        left:10px;
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -moz-transition: -moz-transform 0.6s;
        -o-transition: -o-transform 0.6s;
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun {
        max-height: 0;
        text-align:right;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -moz-transition: max-height 0.6s ease-out;
        -o-transition: max-height 0.6s ease-out;
        -webkit-transition: max-height 0.6s ease-out;
        transition: max-height 0.6s ease-out;
        animation: hideAnimation 0.4s ease-out;
        -moz-animation: hideAnimation 0.4s ease-out;
        -webkit-animation: hideAnimation 0.4s ease-out;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun li {
        padding: 0;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun li a {
        display: block;
        color: #6f6f6f;
        background: #EEE;
        -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
        -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
        box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
        text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
        padding: 10px 10px;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun li a:hover {
        background: #f6f6f6;
    }
    .dropdown-kazerun > input[type="checkbox"] {
        opacity: 0;
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .dropdown-kazerun > input[type="checkbox"]:checked ~ .dropdown-menu-kazerun {
        max-height: 9999px;
        display: block;
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        animation: showAnimation 0.5s ease-in-out;
        -moz-animation: showAnimation 0.5s ease-in-out;
        -webkit-animation: showAnimation 0.5s ease-in-out;
        -moz-transition: max-height 2s ease-in-out;
        -o-transition: max-height 2s ease-in-out;
        -webkit-transition: max-height 2s ease-in-out;
        transition: max-height 2s ease-in-out;
    }
    .dropdown-kazerun > input[type="checkbox"]:checked + a[data-toggle="dropdown-kazerun"]:before {
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        -moz-transition: -moz-transform 0.6s;
        -o-transition: -o-transform 0.6s;
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
    }

    @keyframes showAnimation {
        0% {
            -moz-transform: scaleY(0.1);
            -ms-transform: scaleY(0.1);
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
        }
        40% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        100% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
    @-moz-keyframes showAnimation {
        0% {
            -moz-transform: scaleY(0.1);
            -ms-transform: scaleY(0.1);
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
        }
        40% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        100% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
    @-webkit-keyframes showAnimation {
        0% {
            -moz-transform: scaleY(0.1);
            -ms-transform: scaleY(0.1);
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
        }
        40% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        100% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
    @keyframes hideAnimation {
        0% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
        }
    }
    @-moz-keyframes hideAnimation {
        0% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
        }
    }
    @-webkit-keyframes hideAnimation {
        0% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
        }
    }
</style>

<div class="container-kazerun">
    <ul>
        <li class="dropdown-kazerun">
            <input type="checkbox" />
            <a href="#" data-toggle="dropdown-kazerun">لوازم التحریر</a>
            <ul class="dropdown-menu-kazerun">
                <li><a href="#">کتاب</a></li>
                <li><a href="#">دفتر</a></li>
                <li><a href="#">مداد</a></li>
                <li><a href="#">پاک کن</a></li>
            </ul>
        </li>
        <li class="dropdown-kazerun">
            <input type="checkbox" />
            <a href="#" data-toggle="dropdown-kazerun">تست</a>
            <ul class="dropdown-menu-kazerun">
                <li><a href="#">تست ۱</a></li>
                <li><a href="#">تست ۲</a></li>
                <li><a href="#">تست ۳</a></li>
                <li><a href="#">تست ۴</a></li>
            </ul>
    </ul>
</div>
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
برای مشاهده تخفیف های ویژه امروز کلیک کنید

پاسخ ها به این سوال

پاسخ ها به این سوال

{{ digitTrunc(post.likes) }}

این پست در تاریخ {{ dateString(new Date(post.deleteDate)) }} توسط {{ post.deletedByUser }} حذف شده است.

دلیل حذف: {{ post.deleteReason ?? 'نامشخص' }}

{{ err }}
{{ post.userAchivements.rhodiumAchievements }}
{{ post.userAchivements.platinumAchievements }}
{{ post.userAchivements.goldAchievements }}
{{ post.userAchivements.silverAchievements }}
{{ post.userAchivements.bronzeAchievements }}
{{ timeSince(new Date(post.date)) }} قبل
برای ثبت پاسخ خود در وب سایت وارد حساب کاربری خود شوید
قابلیت ارسال مطلب توسط مدیریت سایت غیر فعال شده است
پست های وبلاگ
جدیدترین مقالات
سوالات محبوب
فعالترین سوالات