左側固定，右側自適應的佈局方式-css教學-PHP中文網

首頁

web前端

css教學

左側固定，右側自適應的佈局方式

php中世界最好的语言

Mar 22, 2018 pm 03:22 PM

右側佈局

這次帶給大家左側固定，右側自適應的佈局方式，左側固定，右側自適應佈局方式的注意事項有哪些，下面就是實戰案例，一起來看一下。

第一種方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第一种方法</p>
</body>
</html>

登入後複製

第二種方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第二种方法</p>
</body>
</html>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7763

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

Windows 11: 匯入和匯出開始佈局的簡單方法 Aug 22, 2023 am 10:13 AM

在Windows11中，「開始」功能表經過重新設計，並具有一組簡化的應用，這些應用程式排列在頁面網格中，這與它的前身不同，後者在「開始」功能表上有資料夾、應用程式和組。您可以自訂「開始」功能表佈局，並將其匯入並匯出至其他Windows設備，以根據您的喜好進行個人化設定。在本指南中，我們將討論在Windows11上匯入開始佈局以自訂預設佈局的逐步說明。什麼是Windows11中的Import-StartLayout？導入開始佈局是Windows10和更早版本中使用的cmdlet，用於將「開始」功能表的自定

如何在 Windows 11 中儲存桌面圖示位置佈局 Aug 23, 2023 pm 09:53 PM

Windows11在使用者體驗方面帶來了很多東西，但迭代並不完全防錯。使用者不時會遇到問題，圖示定位的變更很常見。那麼如何在Windows11中保存桌面佈局呢？該任務有內建和第三方解決方案，無論是保存當前視窗的螢幕解析度還是桌面圖示的排列。對於桌面上有一堆圖示的使用者來說，這一點變得更加重要。繼續閱讀以了解如何在Windows11中儲存桌面圖示位置。為什麼Windows11不儲存圖示佈局位置？以下是Windows11不保存桌面圖示佈局的主要原因：對顯示設定的變更：通常，當您修改顯示設定時，配置的自訂

WordPress網頁錯位現象解決攻略 Mar 05, 2024 pm 01:12 PM

WordPress網頁錯位現象解決攻略在WordPress網站開發中，有時候我們會遇到網頁元素錯位的情況，這可能是由於不同裝置上的螢幕尺寸、瀏覽器相容性或CSS樣式設定不當所致。要解決這種錯位現象，我們需要仔細分析問題、找出可能的原因，並逐步進行除錯和修復。本文將分享一些常見的WordPress網頁錯位問題以及對應的解決攻略，同時提供具體的程式碼範例，幫助開

Win7工作列顯示在桌面右側視窗怎麼辦 Jun 29, 2023 pm 07:41 PM

　　Win7工作列顯示在桌面右側視窗怎麼辦？一般情況下工作列預設是在螢幕底部的，但近期有Win7用戶打開電腦發現工作列跑到螢幕的右側視窗去了，那麼有沒有什麼方法可以將其修改回來呢？很多小夥伴不知道怎麼詳細操作，小編下面整理了Win7工作列顯示在桌面右側視窗解決步驟，如果你有興趣的話，跟著小編一起往下看看吧！ Win7工作列顯示在桌面右側視窗解決步驟1、首先我們右鍵點選桌面右側視窗的工作欄，選擇屬性，如下圖所示：　　2、開啟的工作列和屬性視窗中，在螢幕上的工作列位置選擇底部，並勾選鎖定工作列，點

如何使用HTML和CSS建立響應式輪播圖佈局 Oct 20, 2023 pm 04:24 PM

如何使用HTML和CSS建立一個響應式輪播圖佈局在現代的網頁設計中，輪播圖是一個常見的元素。它能夠吸引用戶的注意力，展示多個內容或圖片，並且能夠自動切換。在本文中，我們將介紹如何使用HTML和CSS建立一個響應式的輪播圖佈局。首先，我們需要建立一個基本的HTML結構，並且加入所需的CSS樣式。以下是一個簡單的HTML結構：<!DOCTYPEhtml&g

介紹win7裡的視窗排列方式 Dec 26, 2023 pm 04:37 PM

當我們同時開啟多個視窗時，win7具有將多個視窗以不同方式排列然後同時顯示的功能，能夠讓我們更清晰地查看到每個視窗的內容。那麼win7窗口排列方式有幾種呢，他們分別都是什麼樣的呢，下面就跟著小編一起來看一下吧。 win7視窗排列方式有幾種答案：三種，分別是層疊視窗、堆疊顯示視窗和並排顯示視窗。當我們開啟多個視窗時，可以右鍵點擊任務欄空白處。就可以看到三種視窗排列方式了。一、層疊視窗：二、堆疊顯示視窗：三、並排顯示視窗：

H5中position屬性的靈活運用技巧 Dec 27, 2023 pm 01:05 PM

H5中如何靈活運用position屬性在H5開發中，常會涉及到元素的定位和佈局問題。這時候，CSS的position屬性就會發揮作用。 position屬性可以控制元素在頁面中的定位方式，包括相對定位（relative）、絕對定位（absolute）、固定定位（fixed）和黏附定位（sticky）。本文將詳細介紹在H5開發中如何靈活運用position屬性