How to align Two DIV elements Adjacent to each other in ASP.Net

jordan

SOLVED CLOSED ACTIVE ANSWERED
User: jordan
Posted: on Feb 19, 2017 10:05 PM
Forum: ASP.Net Web Forms
Answer: 1
Views: 3185

I have used multiple slick slider its working fine but the problem is i want image like below OURBRAND that is stable and after that i want slider..Slider images are so big so i want it smaller.

Like below i want

P.s. For sample purpose plz use any images.....

like this i want

And my code display result like this..

This is the result of my code ...

    <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery('.brand').slick({
                    infinite: true,
                    slidesToShow: 4,
                    slidesToScroll: 1, 
                     arrows:false,
                      autoplay: true,
                    autoplaySpeed: 2000,
                });
            });
    </script>

<div style="width: 900px; border-radius: 10px;">
  <%-- <h3 style="text-align: center; font-size: xx-large; text-decoration: underline;">
   OUR BRAND</h3>--%>
  <%--<img src="images/Brand mshoes/aldo.jpg" alt="" style="height: 150px; width: 264px;
   margin: 35px; margin-bottom: 1px; margin-left: -5px;" />--%>
</div>
   <%-- <hr style="color: Black;" />--%>
<div id="div6" class="brand" runat="server" style="background-color: white; padding-bottom: 10px;">
    <img src="images/brand mshoes/addidas.jpg" alt="" style="height: 118px; width: 150px;" />
    <img src="images/brand mshoes/aldo.jpg" alt="" style="height: 118px; width: 150px;" />
    <img src="images/brand mshoes/converse.jpg" alt="" style="height: 118px; width: 150px;" />
    <img src="images/brand mshoes/nike.png" alt="" style="background-color: white; height: 118px;
     width: 150px;" />
    <img src="images/brand mshoes/sekchers.png" alt="" style="height: 118px; width: 150px;" />
    <img src="images/brand mshoes/puma.jpg" alt="" style="height: 118px; width: 150px;" />
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 1

Reply
ANSWER
User: AnandM
Replied: on Feb 20, 2017 02:38 AM
Report

Hi jordan,

Refer below sample and modify it according to your requirement

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('.brand').slick({
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
                arrows: false,
                autoplay: true,
                autoplaySpeed: 2000
            });
        });
    </script>
    <style type="text/css">
        /* the slides */
        .slick-slide
        {
            margin: 0 5px;
        }
        /* the parent */
        .slick-list
        {
            margin: 0 -5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 700px; height: 118px; position: relative;">
        <div style="border-radius: 10px; position: absolute; left: 0%; width: 25%; height: 100%;">
            <img style="height: 90px; width: 100px;" src="https://i.imgur.com/BvYcH7W.png"
                alt="" />
        </div>
        <div id="div6" class="brand" runat="server" style="background-color: white; position: absolute;
            left: 14%; width: 65%; height: 100%; padding-bottom: 10px;">
            <img src="http://farm8.staticflickr.com/7424/10380408813_3cd984570d_n.jpg" alt="" />
            <img src="http://farm4.staticflickr.com/3723/8986453414_a869ddc3aa_n.jpg" alt="" />
            <img src="http://farm9.staticflickr.com/8395/8985239089_4318196db2_n.jpg" alt="" />
            <img src="http://farm6.staticflickr.com/5458/8986421148_090da165fe_n.jpg" alt="" />
            <img src="http://farm8.staticflickr.com/7310/8805047049_d5d83deedb_n.jpg" alt="" />
            <img src="http://farm3.staticflickr.com/2885/8815468608_ea2c73bf2f_n.jpg" alt="" />
            <img src="http://farm3.staticflickr.com/2595/4181626944_b390404999_n.jpg" alt="" />
            <img src="http://farm3.staticflickr.com/2751/4356801873_f41090c50f_n.jpg" alt="" />
            <img src="http://farm5.staticflickr.com/4080/4768042991_0de674ab7c_n.jpg" alt="" />
            <img src="http://farm8.staticflickr.com/7129/6885968576_8c08f634bb_n.jpg" alt="" />
            <img src="http://farm8.staticflickr.com/7275/7032073271_de335d44cb_n.jpg" alt="" />
        </div>
    </div>
    </form>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

How to align Two DIV elements Adjacent to each other in ASP.Net

Company

Explore

Follow us

Contact Us