Question

我如何制作2个不同的div元素A和B它们包含在div元素C中。

A和B从左上角的同一个角落开始，我尝试将A和B改为绝对位置和工作位置，但我需要A来保持位置相对位置。代码可以在https://jsfiddle.net/bms1upkn/2/

找到

HTML

unit ExpectingThread;

interface

uses
    System.Classes;

type
    TExpectingThread = class(TThread)
    private
        _timeoutMs: Integer;
        _buff: string;
        _patterns: TArray<string>;
        _result: Integer;
        function Timeouted(startTime: Cardinal): Boolean;
        function ExpectedDetected: Boolean;

    protected
        procedure Execute; override;
    public
        constructor Create(patterns: TArray<string>; buff: string; timeoutMs: Integer);
        //this method is called from other NOT MAIN thread
        procedure BuffUpdate(text: string);
    end;

implementation

uses
    Winapi.Windows,
    System.RegularExpressions;

{ TExpectingThread }

constructor TExpectingThread.Create(patterns: TArray<string>; buff: string; timeoutMs: Integer);
begin
    _patterns := patterns;
    _timeoutMs := timeoutMs;
    _buff := buff;
end;

//this method is called from other NOT MAIN thread
procedure TExpectingThread.BuffUpdate(text: string);
begin
    // lock
    TThread.Synchronize(Self, procedure
        begin
            _buff := _buff + text;
        end);
    // unlock
end;

procedure TExpectingThread.Execute;
var
    startTime: Cardinal;
begin
    inherited;

    startTime := GetTickCount;
    while true do
    begin
        if Timeouted(startTime) then
        begin
            Self.ReturnValue := 0; // timeouted
            Exit;
        end;

        if ExpectedDetected then
        begin
            Self.ReturnValue := 1; // found
            Exit;
        end;
    end;
end;

function TExpectingThread.ExpectedDetected: Boolean;
var
    regex: TRegEx;
    i: Integer;
begin
    // lock
    result := 0;
    for i := 0 to High(_patterns) do
    begin
        regex.Create(_patterns[i]);
        if regex.IsMatch(_buff) then
        begin
            _result := i;
            Exit(true);
        end;
    end;
    // unlock
end;

function TExpectingThread.Timeouted(startTime: Cardinal): Boolean;
var
    currentTime: Cardinal;
begin
    currentTime := GetTickCount;
    result := currentTime - startTime > _timeoutMs;
end;

end.

CSS

<div class="c">
  <div class="a">
  </div>
  <div class="b">
  </div>
</div>

<div class="c">
  <div class="a">
  </div>
  <div class="b">
  </div>
</div>

<div class="c">
  <div class="a">
  </div>
  <div class="b">
  </div>
</div>

<div class="c">
  <div class="a">
  </div>
  <div class="b">
  </div>
</div>

</div>

Answer 1

不确定这是否是你想要的？您的描述很难理解。

https://jsfiddle.net/bms1upkn/4/

CSS：

.data {
  width: 100%;
}
.c {
  height: 200px;
  width: 25%;
  float: left;
  margin-left: 10px;
  margin-bottom: 20px;
  position:relative;
}
.a {
  position: absolute;
  background-color: red;
  height: 200px;
  width: 100%;
}

.b {
  position: absolute;
  background-color: green;
  height: 100px;
  width: 100px;
}

Answer 2

.data {
  width: 100%;
}
.c {
  height: 200px;
  width: 25%;
  float: left;
  margin-left: 10px;
  margin-bottom: 20px;
  position:relative; //new
}
.a {
  position: relative;
  background-color: red;
  height: 200px;
  width: 100%;
}

.b {
  position: absolute;
  background-color: green;
  height: 100px;
  width: 100px;
  left:0px; //new
  top:0px; //new
}

CSS div（相对绝对值）

2 个答案: