visual studio code如何讓我的content往右移

visual studio code

yonghaow88 2023-09-06 11:40:05 ‧ 1427 瀏覽

分享至

        }
        main{
            background-color: #e1b8f3;
            min-height: 150px;
            overflow:hidden;
        }
        .content{
            background-color: #de92ff;
            float:left;
            width: 56%;
            padding: 12px;
            margin: 2% 0;
        }
        figure{
            background-color: #f0d6fd;
            width: 40%;
            height: 150px;
            margin: 4%;
            float: left;
        }
        .gomore{
            background-color: darkblue;
            color: white;
            text-decoration: none;
            padding: 20px;
            display: block;
            clear: both;
            float: right;
            position: relative;
        }
        .gomore p{
            background-color: black;
            color: white;
            padding: 10px;
            position: absolute;
            right: 0;
            top: 0;
            width: 250px;
            transform: translateY(calc(-100%-15px));
            display: none;
        }
        .gomore p::after{
            content: '';
            display: block;
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-top-color: black;
            position: absolute;
            right: 0;
            bottom: 0;
            transform: translate(-30px,28px);
        }
        .gomore:hover p{
            display: block;
        }
        footer{
            background-color: #d5f3b8;
            text-align: center;
            padding: 1em;
        }
        img{
            background-color: #fff;
            width: 150px;
            padding: 20px;
            margin: 20px;
            /* display: inline-block; */
            /* display: inline; */
  
        }
       
        </style>
</head>
<body>
    <header>
        <div class="Logo">Logo</div>
        <nav>
            <a href="">回首頁</a>
            <a href="">button1</a>
            <a href="">button2</a>
            <a href="">button3</a>
            <a href="">button4</a>
            <a href="">button5</a>
        </nav>
    </header>
    <main>
        <div>
            <img src="./images/01.jpg">
       </div>
        <div class="content">
            <h1>BAS建築自動化系統</h1>
            <figure>介紹內容 Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ut fugiat neque. Dolorum voluptatum eum voluptas facere doloribus aliquam, illum officia aspernatur, ipsam, sit ducimus molestiae sunt dignissimos. Necessitatibus, nihil.</figure>
            <figure>手冊下載</figure>
        </div>
    </main>
    
    <footer>
        <p>Copyright © 2023 ITsESG</p>
    </footer>
</body>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

janlin002

iT邦好手 1 級 ‧ 2023-09-06 12:30:07

最佳解答

.content{
    background-color: #de92ff;
    float:left;
    width: 56%;
    padding: 12px;
    margin: 2% 自定義 2% 0;
}

自定義你自己決定要推多少

可參考: https://www.w3schools.com/css/css_margin.asp

回應 1
分享
檢舉

yonghaow88 iT邦新手 4 級 ‧ 2023-09-06 16:25:18 檢舉

謝謝

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

visual studio code如何讓我的content往右移

1 個回答

我要發表回答

標記使用者