Question

所以我是编码的新手，我正在尝试创建一个网站，其中包含一些全宽（100％）容器，里面包含固定宽度的容器......我试过玩数字和div相似，但都没有工作。

这是网站模型的图片：

这是我到目前为止的代码：

HTML：

#wrapper {
    width: 950px;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 175px;
    background-color: #ff8400;
}

#nav {
margin-top: 280px;
width: 100%;
}

.nav {
    list-style: none;
    margin: 0;
    text-align: left;
    background-color: #08172d;
    padding: 5px 0;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
    color: #fff;
    font-family: arial;
    font-weight: bold;
    text-decoration: none;
}
.nav a:hover{
    display:inline-block;
    padding:10px;
    color: #ff8400;
    font-family: arial;
    font-weight: bold;
}

CSS：

program TextMusicPlayer;
uses TerminalUserInput;

type
    Tracks = record
       name: String;
    end;

    Album = record
       name: String;
       artist: String;
       genre: String;
       track: array of String;
       key: Integer;
       trackcount: integer;
    end;

    playlist = array of Album;

function GetAlbum( var myFile: TextFile): Album;
var
   albumInfo: Album;
   i: Integer;
begin
   albumInfo.name := ReadString('Enter name: ');
   albumInfo.artist := ReadString('Enter artist: ');
   albumInfo.genre := ReadString('Enter genre: ');
   albumInfo.trackcount := ReadInteger('Enter track no.: ');
   SetLength(albumInfo.track, albumInfo.trackcount); 
   for i := 0 to High(albumInfo.track) do
   begin
      ReadLn(myFile, albumInfo.track[i]);
   end;
   albumInfo.key := -1;
   result := albumInfo;
   Close(myFile);
end;

function GetAlbums(): playlist;
var
    myFile: TextFile;
    playlist: array of Album;
    i, r: integer;
begin
    AssignFile(myFile, 'music.txt');
    Reset(myFile);
    ReadLn(myFile, r);
    SetLength(playlist, r);
    for i := 0 to High(playlist) do
        begin
            playlist[i] := GetAlbum(myFile);
        end;
    result := playlist;
end;

function PrintAllAlbums(playlist: playlist): playlist;
var
    i: integer;
begin
    for i := 0 to High(playlist) do
    begin
       playlist[i].key := i;
       WriteLn(playlist[i].name, ' key number: ', i);
    end;
    result := playlist;
end;

function PrintAllGenres(playlist: Playlist): Playlist;
var
   genre: String;
   i: Integer;
   r: Integer;
   m: Integer;
begin
   m := 0;
   for i := 0 to High(playlist) do
   begin
      playlist[i].key := -1;
   end;

   genre := ReadString('Enter the Genre: ');

   for r := 0 to High(playlist) do
   begin
      if (genre = playlist[r].genre) then
      begin
         playlist[i].key := m;
         WriteLn(playlist[r].name, ' key number: ', m);
         m := m + 1;
      end;
    end;
    result := playlist;
end;

function PrintAlbums(playlist: playlist): playlist;
var
    val: integer;
begin
    WriteLn('***Displaying Albums***');
    WriteLn('1 - Display all albums');
    WriteLn('2 - Display all of one genre');
    WriteLn('3 - Back to Main Menu');
    val := ReadInteger('Enter a number to enter a Menu: ');

    case val of
       1: playlist := PrintAllAlbums(playlist);
       2: playlist := PrintAllGenres(playlist);
    end;
    result := playlist;
end;

procedure PlayAlbum(albumInfo: Album);
var
   i: Integer;
   r: Integer;
begin
    WriteLn('Album:', albumInfo.name);
    for i := 0 to High(albumInfo.track) do
    begin
       WriteLn(i + 1, albumInfo.track[i]);
    end;
    r := ReadInteger('Select a track number to play: ');
    while (r < 1) or (r > (High(albumInfo.track) + 1)) do
    begin
       r := ReadInteger('Please select a track number from above: ');
    end;
    WriteLn('Playing track ', r, albumInfo.track[(r - 1)], ' from the album ', albumInfo.name);
    ReadString('Press Enter to return to Main Menu ');
end;

procedure SelectAlbum(playlist: Playlist);
var
   val: Integer;
   i: Integer;
   r: Integer;
begin
   r := 0;
   WriteLn('***Welcome to the Track Player***');
   val := ReadInteger('Enter an Albums key number');
   for i := 0 to High(playlist) do
   begin
      if (playlist[i].key = val) then
      begin
         PlayAlbum(playlist[i]);
      end
      else
      begin
         r := r + 1;
      end;
   end;
   if r > High(playlist) then
   begin
      WriteLn('Album was not found, now returning to Main Menu ');
   end;
end;

function ChangeAlbum(albumInfo: Album): Album;
begin
    albumInfo.name := ReadString('Please enter a new name for this album');
    albumInfo.genre := ReadString('Please enter a new gernre for this album');
    result := albumInfo;
end;

function ChangeAlbums(playlist: Playlist): Playlist;
var
   val: Integer;
   i: Integer;
   j: Integer;
begin
   j := 0;
   WriteLn('***Album Updater***');
   val := ReadInteger('Enter an Albums key number: ');
   for i := 0 to High(playlist) do
   begin
      if (playlist[i].key = val) then
        begin
         playlist[i] := ChangeAlbum(playlist[i]);
        end
      else
        begin
         j := j + 1;
        end;
    end;
   if j > High(playlist) then
   begin
      WriteLn('Album was not found, now returning to Main Menu ');
   end;
   result := playlist;
end;

procedure Main();
var
    i, val: Integer;
    playlist: array of Album;
begin
    i := 0;
    while (i = 0) do
    begin
       WriteLn('');
       WriteLn('***Text Music Player Menu***');
       WriteLn('1 - Add new Albums');
       WriteLn('2 - View Albums');
       WriteLn('3 - Play an Album');
       WriteLn('4 - Update an Album');
       WriteLn('5 - Quit');
       val := ReadInteger('Enter a number to enter a Menu: '); 

       case val of
          1: playlist := GetAlbums();
          2: playlist := PrintAlbums(playlist);
          3: SelectAlbum(playlist);
          4: playlist := ChangeAlbums(playlist);
       else
          i := i + 1;
       end;
    end;
end;

begin
    Main();
end.

上面的代码显示了固定宽度布局（虽然它后面的整个身体仍然是白色），但我不知道如何为标题，导航栏和内容区域包含单个全宽父div。完全忽略包装器（fix-width），这就是我使用数字方法时发生的事情......任何想法？

Answer 1

您应该使用max-width属性

max-width属性用于设置元素的最大宽度。这可以防止width属性的值变得大于max-width。注意：max-width属性的值会覆盖宽度。

成为

.parent{
  width: 100%;
}
.child{
  padding: 25px 0;
  margin: 0 auto;
  max-width: 540px;
}

试图将固定宽度的容器装入全宽（100％）父级？

1 个答案: