Question

我需要两列，一列是响应式，另一列是100px width

例如左栏有100px width，右栏有剩余宽度

在这个简单的代码中放宽多少？

<!DOCTYPE html>
<html>
<head>
    <style>
        .main{
            display: table;
            clear: both;
            width: 100%;
        }
        #left{
            float: left;
            width: 100px;
        }
        #right{
            float: right;
            /*width: ;*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</body>
</html>

Answer 1

由于您已在父级上使用display: table，请将子级的显示设置为table-cell，并像第一个一样为第一个显示宽度。第二列将自动获取剩余宽度。

#left{
    display: table-cell;
    width: 100px;
}

#right{
    display: table-cell;
}

示例：https://jsbin.com/dicuvigaka/edit?html,output

Answer 2

您可以使用html, body { margin: 0; padding: 0; } .main { width: 100%; } #left { float: left; width: 100px; background: lightblue; } #right { float: left; background-color: tomato; width: calc(100% - 100px); }来计算剩余宽度。检查浏览器兼容性表：Can I use calc()。

<!DOCTYPE html>
<html>

<head>
  <style>
  </style>
</head>

<body>
  <div class="main">
    <div id="left">
      left
    </div>
    <div id="right">
      right
    </div>
  </div>
</body>

</html>

%include "asm_io.inc"
segment .data 
prompt1         db  "Enter the unit for file size: ", 0
prompt2         db  "Enter the unit for throughput: ", 0
prompt3         db  "Enter the file size: ", 0
prompt4         db  "Enter the througput: ", 0
outputformat    db  "The time would be %d seconds.", 10, 0

segment .bss 

segment .text
    global  asm_main
    extern printf
asm_main:
    enter   0,0               ; setup routine
    pusha
;***************CODE STARTS HERE***************************
mov eax, prompt1            ; move prompt1 into eax for display
call    print_string            ; display prompt 1
call    read_char           ; read file size unit from user
call    read_char
push    eax             ; store file size unit on stack @ ebp+20

mov eax, prompt2            ; move prompt2 into eax for display
call    print_string            ; display prompt 2
call    read_char           ; read  throughput unit from user
call    read_char
push    eax             ; store throughput unit on stack @ ebp+16

mov eax, prompt3            ; move prompt3 into eax for display
call    print_string            ; display prompt 3
call    read_int            ; read file size from user
push    eax             ; store file size on stack @ ebp+12

mov eax, prompt4            ; move prompt4 into eax for display
call    print_string            ; display prompt4
call    read_int            ; read throughput from user
push    eax             ; store throughput unit on stack @ ebp+8

call    dl_time             ; call custom function to calc download time
add esp, 16             ; remove parameters from stack

push    eax             ; push download time onto stack for printf
push    outputformat            ; push format for printf function onto stack

call    printf              ; display formatted output
add esp, 8

;***************CODE ENDS HERE*****************************
    popa
    mov     eax, 0            ; return back to C
    leave                     
    ret

; function dl_time
; returns the download time for given file
; unisnged int dl_time( char fs_unit, char speed_unit, int file_size, int        conn_speed)
; parameters:
;   fs_unit     - unit for file size
;   tp_unit     - unit for connection speed
;   file_size   - file size
;   throughput  - connection speed
; return value:
;   download time for given file with given speed, in seconds floored

%define fs_unit     [ebp+20]
%define tp_unit     [ebp+16]
%define file_size   [ebp+12]
%define throughput  [ebp+8]

dl_time:
    enter   0,0             ; make room for speed and size on stack
    push    ebx             ; store value of ebx
    push    ecx             ; store value of ecx
    push    edx             ; store value of edx

    mov edx, 'B'
    cmp edx, fs_unit            ; if file size unit is byte
    jz  fs_B

    mov edx, 'K'
    cmp edx, fs_unit            ; if file size unit is kilobyte
    jz  fs_K

    mov edx, 'M'
    cmp edx, fs_unit            ; if file size unit it megabyte
    jz  fs_M

fs_B:
    ;imul   eax, file_size, 1024        ; calculate file size in bits
    sal file_size, 10
    jmp after_fs
fs_K:
    ;imul   eax, file_size, 1024
    ;imul   eax, 1024           ; calculate file size in bits
    sal file_size, 20
    jmp after_fs
fs_M:
    ;imul   eax, file_size, 1024
    ;imul   eax, 1024
    ;imul   eax, 1024           ; calculate file size in bits
    sal file_size, 30

after_fs:
    mov edx, 'B'
    cmp edx, tp_unit            ; if throughput unit is bits per second
    jz  after_tp

    mov edx, 'K'
    cmp edx, tp_unit            ; if throughput unit is kilobits per second
    jz  tp_K

    mov edx, 'M'
    cmp edx, tp_unit            ; if throughput unit is megabits per second
    jz  tp_M

tp_K:
    ;imul   ebx, throughput, 1024       ; convert kilobits to bits
    sal throughput, 10
    jmp after_tp
tp_M:
    ;imul   ebx, throughput, 1024       ; convert megabits to bits
    ;imul   ebx, 1024
    sal throughput, 20

after_tp:
    xor edx, edx            ; clear edx for division
    mov eax, file_size
    mov ebx, throughput
    div ebx             ; divide file size by throughput
    mov ecx, 128            ; move 128 into ecx for division
    div ecx             ; divide quotient by 128 to arive at download time

pop ebx
pop ecx
pop edx
leave
ret

Answer 3

试试这个：

#left {
    position: absolute;
    left: 0;
    width: 100px;
}

#right {
    position: absolute;
    left: 100px;
    width: 100%;
}

2列CSS一响应另一个固定

3 个答案: